@mapples/components 1.1.2 → 1.2.0

package/dist/components/actions/Chip/index.js

@@ -0,0 +1,84 @@
+import { forwardRef } from 'react';
+import { StyledPressable, StyledView, Typography, } from '@mapples/style';
+import { DISABLED_OPACITY, Icon, RADII, Tokens, useTones, } from '@mapples/ui';
+import { Pressable, } from 'react-native';
+import { Glyph, useControllableState, useInteractionState, useSlotColor, } from '../../../internal';
+import { defaults } from './defaults';
+import { CHIP_GEOMETRY } from './types';
+/**
+ * A compact, content-sized pill for a filter, tag or choice. `filter` chips
+ * toggle through `selected ↔ onSelectedChange` and show a check while
+ * selected; `input` chips add a close glyph. Rows of chips belong in
+ * `ChipGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Chip label="Vegan" variant="filter" selected={vegan} onSelectedChange={setVegan} />
+ * ```
+ *
+ * @public
+ */
+const Chip = forwardRef(({ label, variant = 'assist', selected, defaultSelected = false, onSelectedChange, leadingIconName, closable = false, onClose, size = 'md', tone = 'primary', disabled, onPress, onPressIn, onPressOut, onHoverIn, onHoverOut, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const palette = tones.tone(tone);
+    const isDisabled = !!disabled;
+    const geometry = CHIP_GEOMETRY[size];
+    const [isSelected, setSelected] = useControllableState({
+        value: selected,
+        defaultValue: defaultSelected,
+        onChange: onSelectedChange,
+    });
+    const toggles = variant === 'filter' || selected !== undefined || !!onSelectedChange;
+    const interaction = useInteractionState({ onPressIn, onPressOut, onHoverIn, onHoverOut }, isDisabled);
+    const text = tones.resolve(Tokens.color.text);
+    const labelColor = useSlotColor(isSelected ? styled?.styleLabelSelected : styled?.styleLabel, 'color', isSelected ? palette.main : text);
+    const glyphColor = useSlotColor(styled?.styleIcon, 'color', labelColor);
+    const showClose = closable || variant === 'input';
+    return (<StyledPressable ref={ref} accessibilityRole="button" accessibilityState={{
+            disabled: isDisabled,
+            selected: toggles ? isSelected : undefined,
+        }} disabled={isDisabled} onPress={(event) => {
+            if (toggles)
+                setSelected(!isSelected);
+            onPress?.(event);
+        }} {...interaction.handlers} styled={{
+            style: [
+                defaults.root,
+                {
+                    height: geometry.height,
+                    paddingHorizontal: geometry.paddingX,
+                    borderRadius: RADII.pill,
+                    borderColor: isSelected ? 'transparent' : tones.outlineStrong,
+                    backgroundColor: isSelected ? palette.container : 'transparent',
+                },
+                styled?.style,
+                isSelected && styled?.styleSelected,
+                isDisabled && { opacity: DISABLED_OPACITY },
+            ],
+        }} {...rest}>
+        {(interaction.pressed || interaction.hovered) && (<StyledView pointerEvents="none" styled={{
+                style: [
+                    defaults.stateLayer,
+                    {
+                        backgroundColor: tones.stateLayer(labelColor, interaction.pressed ? 'pressed' : 'hover'),
+                    },
+                ],
+            }}/>)}
+        {variant === 'filter' && isSelected ? (<Glyph name="check" size={geometry.glyph} color={glyphColor}/>) : leadingIconName ? (<Icon iconName={leadingIconName} size={geometry.glyph} color={glyphColor}/>) : null}
+        {!!label && (<Typography variant={geometry.labelVariant} numberOfLines={1} style={[
+                { color: labelColor },
+                styled?.styleLabel,
+                isSelected && styled?.styleLabelSelected,
+            ]}>
+            {label}
+          </Typography>)}
+        {showClose ? (<Pressable accessibilityRole="button" accessibilityLabel="Remove" disabled={isDisabled} hitSlop={8} onPress={onClose} style={defaults.close}>
+            <Glyph name="close" size={geometry.glyph} color={labelColor}/>
+          </Pressable>) : null}
+      </StyledPressable>);
+});
+Chip.displayName = 'Chip';
+export default Chip;
+//# sourceMappingURL=index.js.map

package/dist/components/actions/Chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/Chip/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/actions/Chip/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link Chip} under the `'Chip'` type key. */
+export declare const ChipSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/actions/Chip/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Chip/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,0DAA0D;AAC1D,eAAO,MAAM,aAAa,EAAE,mBAG3B,CAAC"}

package/dist/components/actions/Chip/schematic.js

@@ -0,0 +1,7 @@
+import Chip from './index';
+/** Registers {@link Chip} under the `'Chip'` type key. */
+export const ChipSchematic = {
+    type: 'Chip',
+    Component: Chip,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/actions/Chip/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/actions/Chip/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,0DAA0D;AAC1D,MAAM,CAAC,MAAM,aAAa,GAAwB;IAChD,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,IAAI;CAChB,CAAC"}

package/dist/components/actions/Chip/types.d.ts

@@ -0,0 +1,15 @@
+/** Chip roles, after Material's chip kinds. */
+export declare const CHIP_VARIANTS: readonly ["assist", "filter", "input", "suggestion"];
+export type ChipVariant = (typeof CHIP_VARIANTS)[number];
+/** Chip heights. */
+export declare const CHIP_SIZES: readonly ["sm", "md"];
+export type ChipSize = (typeof CHIP_SIZES)[number];
+export interface ChipGeometry {
+    height: number;
+    paddingX: number;
+    glyph: number;
+    labelVariant: string;
+}
+/** Geometry per size. */
+export declare const CHIP_GEOMETRY: Record<ChipSize, ChipGeometry>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/actions/Chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Chip/types.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,eAAO,MAAM,aAAa,sDAKhB,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,oBAAoB;AACpB,eAAO,MAAM,UAAU,uBAAwB,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,yBAAyB;AACzB,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAE,YAAY,CAGxD,CAAC"}

package/dist/components/actions/Chip/types.js

@@ -0,0 +1,15 @@
+/** Chip roles, after Material's chip kinds. */
+export const CHIP_VARIANTS = [
+    'assist',
+    'filter',
+    'input',
+    'suggestion',
+];
+/** Chip heights. */
+export const CHIP_SIZES = ['sm', 'md'];
+/** Geometry per size. */
+export const CHIP_GEOMETRY = {
+    sm: { height: 28, paddingX: 10, glyph: 14, labelVariant: 'Caption' },
+    md: { height: 32, paddingX: 12, glyph: 16, labelVariant: 'Label' },
+};
+//# sourceMappingURL=types.js.map

package/dist/components/actions/Chip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/actions/Chip/types.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,YAAY;CACJ,CAAC;AAGX,oBAAoB;AACpB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,CAAU,CAAC;AAUhD,yBAAyB;AACzB,MAAM,CAAC,MAAM,aAAa,GAAmC;IAC3D,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;CACnE,CAAC"}

package/dist/components/actions/ChipGroup/defaults.d.ts

@@ -0,0 +1,17 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    wrap: {
+        alignSelf: "stretch";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+    };
+    scrollRoot: {
+        alignSelf: "stretch";
+    };
+    scrollContent: {
+        flexDirection: "row";
+        gap: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/actions/ChipGroup/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/defaults.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;CAcnB,CAAC"}

package/dist/components/actions/ChipGroup/defaults.js

@@ -0,0 +1,18 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    wrap: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    scrollRoot: {
+        alignSelf: 'stretch',
+    },
+    scrollContent: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/actions/ChipGroup/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE;QACJ,SAAS,EAAE,SAAS;QACpB,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,CAAC;KACP;IACD,UAAU,EAAE;QACV,SAAS,EAAE,SAAS;KACrB;IACD,aAAa,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAC"}

package/dist/components/actions/ChipGroup/index.d.ts

@@ -0,0 +1,72 @@
+import { StyledProp } from '@mapples/style';
+import { Tone } from '@mapples/ui';
+import { TextStyle, View, ViewProps, ViewStyle } from 'react-native';
+import { Option } from '../../../internal';
+import { ChipSize } from '../Chip/types';
+import { ChipGroupValue, ChipGroupVariant } from './types';
+/** Props for {@link ChipGroup}. */
+export interface ChipGroupProps extends Omit<ViewProps, 'children'> {
+    /** The chips: `{label, value, iconName?, disabled?}` entries. */
+    options?: Option[];
+    /** Selection (controlled): one value, or a string array with `multiple`. Omit to let the group keep its own state. */
+    value?: ChipGroupValue;
+    /** Initial selection while uncontrolled. Defaults to none. */
+    defaultValue?: ChipGroupValue;
+    /** Fires with the next selection — the new value is the first argument. */
+    onValueChange?: (value: ChipGroupValue) => void;
+    /** Several chips may be selected; the value is then a string array. Defaults to `false`. */
+    multiple?: boolean;
+    /** One horizontally scrolling line instead of a wrapping row. Defaults to `false`. */
+    scrollable?: boolean;
+    /** Chip role: `filter` chips toggle the selection, `assist` chips report a press. Defaults to `filter`. */
+    variant?: ChipGroupVariant;
+    /** Chip height. Defaults to `md`. */
+    size?: ChipSize;
+    /** Colour role of the selected chips. Defaults to `primary`. */
+    tone?: Tone;
+    /** Disables every chip. */
+    disabled?: boolean;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The group. */
+        style?: StyledProp<ViewStyle>;
+        /** The scrolling line's content (with `scrollable`). */
+        contentContainerStyle?: StyledProp<ViewStyle>;
+        /** Every chip. */
+        styleChip?: StyledProp<ViewStyle>;
+        /** A chip while selected. */
+        styleChipSelected?: StyledProp<ViewStyle>;
+        /** Every chip label. */
+        styleLabel?: StyledProp<TextStyle>;
+        /** A chip label while selected. */
+        styleLabelSelected?: StyledProp<TextStyle>;
+    };
+}
+/**
+ * A row of chips built from `options` — filters over a list, tags, quick
+ * choices. `filter` chips toggle: one at a time by default (`value` is a
+ * string, `''` for none) or several with `multiple` (`value` is a string
+ * array). `assist` chips paint no selection and report the pressed value.
+ * The row wraps onto new lines, or scrolls on one line with `scrollable`.
+ *
+ * @example
+ * ```tsx
+ * <ChipGroup
+ *   options={[
+ *     { label: 'Open now', value: 'open' },
+ *     { label: 'Top rated', value: 'rated' },
+ *     { label: 'Delivery', value: 'delivery' },
+ *   ]}
+ *   multiple
+ *   value={filters}
+ *   onValueChange={setFilters}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default ChipGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/ChipGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAgC,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,MAAM,EAAqC,MAAM,mBAAmB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3D,mCAAmC;AACnC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sHAAsH;IACtH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,qCAAqC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,iBAAiB;QACjB,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,wDAAwD;QACxD,qBAAqB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9C,kBAAkB;QAClB,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClC,6BAA6B;QAC7B,iBAAiB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC1C,wBAAwB;QACxB,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QACnC,mCAAmC;QACnC,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KAC5C,CAAC;CACH;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,SAAS;;wCAkGd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/components/actions/ChipGroup/index.js

@@ -0,0 +1,79 @@
+import { forwardRef } from 'react';
+import { StyledScrollView, StyledView } from '@mapples/style';
+import { readOptions, useControllableState } from '../../../internal';
+import Chip from '../Chip';
+import { defaults } from './defaults';
+/** The selected values behind either value shape. */
+const selectedOf = (value) => Array.isArray(value) ? value : value === '' ? [] : [value];
+/**
+ * A row of chips built from `options` — filters over a list, tags, quick
+ * choices. `filter` chips toggle: one at a time by default (`value` is a
+ * string, `''` for none) or several with `multiple` (`value` is a string
+ * array). `assist` chips paint no selection and report the pressed value.
+ * The row wraps onto new lines, or scrolls on one line with `scrollable`.
+ *
+ * @example
+ * ```tsx
+ * <ChipGroup
+ *   options={[
+ *     { label: 'Open now', value: 'open' },
+ *     { label: 'Top rated', value: 'rated' },
+ *     { label: 'Delivery', value: 'delivery' },
+ *   ]}
+ *   multiple
+ *   value={filters}
+ *   onValueChange={setFilters}
+ * />
+ * ```
+ *
+ * @public
+ */
+const ChipGroup = forwardRef(({ options, value, defaultValue, onValueChange, multiple = false, scrollable = false, variant = 'filter', size = 'md', tone = 'primary', disabled = false, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const items = readOptions(options, 'ChipGroup');
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? (multiple ? [] : ''),
+        onChange: onValueChange,
+    });
+    const selected = selectedOf(current);
+    const toggles = variant === 'filter';
+    const select = (optionValue, next) => {
+        if (!multiple) {
+            setCurrent(next ? optionValue : '');
+            return;
+        }
+        const others = selected.filter((entry) => entry !== optionValue);
+        setCurrent(next ? [...others, optionValue] : others);
+    };
+    const chips = items.map((option) => {
+        const isSelected = selected.includes(option.value);
+        return (<Chip key={option.value} label={option.label} leadingIconName={option.iconName} variant={variant} size={size} tone={tone} disabled={disabled || !!option.disabled} selected={toggles ? isSelected : undefined} onSelectedChange={toggles ? (next) => select(option.value, next) : undefined} onPress={toggles
+                ? undefined
+                : () => setCurrent(multiple ? [option.value] : option.value)} styled={{
+                style: styled?.styleChip,
+                styleSelected: styled?.styleChipSelected,
+                styleLabel: styled?.styleLabel,
+                styleLabelSelected: styled?.styleLabelSelected,
+            }}/>);
+    });
+    return (<StyledView ref={ref} styled={{
+            style: [
+                scrollable ? defaults.scrollRoot : defaults.wrap,
+                styled?.style,
+            ],
+        }} {...rest}>
+        {scrollable ? (<StyledScrollView horizontal showsHorizontalScrollIndicator={false} styled={{
+                contentContainerStyle: [
+                    defaults.scrollContent,
+                    styled?.contentContainerStyle,
+                ],
+            }}>
+            {chips}
+          </StyledScrollView>) : (chips)}
+      </StyledView>);
+});
+ChipGroup.displayName = 'ChipGroup';
+export default ChipGroup;
+//# sourceMappingURL=index.js.map

package/dist/components/actions/ChipGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/actions/ChipGroup/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link ChipGroup} under the `'ChipGroup'` type key. */
+export declare const ChipGroupSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/actions/ChipGroup/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,oEAAoE;AACpE,eAAO,MAAM,kBAAkB,EAAE,mBAGhC,CAAC"}

package/dist/components/actions/ChipGroup/schematic.js

@@ -0,0 +1,7 @@
+import ChipGroup from './index';
+/** Registers {@link ChipGroup} under the `'ChipGroup'` type key. */
+export const ChipGroupSchematic = {
+    type: 'ChipGroup',
+    Component: ChipGroup,
+};
+//# sourceMappingURL=schematic.js.map

package/dist/components/actions/ChipGroup/schematic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.js","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/schematic.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC,oEAAoE;AACpE,MAAM,CAAC,MAAM,kBAAkB,GAAwB;IACrD,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC"}

package/dist/components/actions/ChipGroup/types.d.ts

@@ -0,0 +1,6 @@
+/** Chip roles a group renders: `filter` chips toggle, `assist` chips fire once. */
+export declare const CHIP_GROUP_VARIANTS: readonly ["filter", "assist"];
+export type ChipGroupVariant = (typeof CHIP_GROUP_VARIANTS)[number];
+/** What a group reports: one value (`''` for none), or every selected value with `multiple`. */
+export type ChipGroupValue = string | string[];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/actions/ChipGroup/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/types.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,eAAO,MAAM,mBAAmB,+BAAgC,CAAC;AACjE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,gGAAgG;AAChG,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC"}

package/dist/components/actions/ChipGroup/types.js

@@ -0,0 +1,3 @@
+/** Chip roles a group renders: `filter` chips toggle, `assist` chips fire once. */
+export const CHIP_GROUP_VARIANTS = ['filter', 'assist'];
+//# sourceMappingURL=types.js.map

package/dist/components/actions/ChipGroup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/actions/ChipGroup/types.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU,CAAC"}

package/dist/components/actions/Fab/defaults.d.ts

@@ -0,0 +1,18 @@
+/** Runtime defaults — author slots merge over these. */
+export declare const defaults: {
+    root: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        alignSelf: "flex-start";
+        overflow: "hidden";
+    };
+    stateLayer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+    };
+};
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/actions/Fab/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Fab/defaults.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAenB,CAAC"}

package/dist/components/actions/Fab/defaults.js

@@ -0,0 +1,19 @@
+import { Styler } from '@mapples/style';
+/** Runtime defaults — author slots merge over these. */
+export const defaults = Styler.create({
+    root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'flex-start',
+        overflow: 'hidden',
+    },
+    stateLayer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/components/actions/Fab/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/components/actions/Fab/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,QAAQ;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC"}

package/dist/components/actions/Fab/index.d.ts

@@ -0,0 +1,53 @@
+import { StyledProp } from '@mapples/style';
+import { PressableProps, TextStyle, View, ViewStyle } from 'react-native';
+import { FabSize, FabTone } from './types';
+/** Props for {@link Fab}. */
+export interface FabProps extends Omit<PressableProps, 'children' | 'style'> {
+    /** Glyph (project icon family). Defaults to `add`. */
+    iconName?: string;
+    /** Text beside the glyph; makes this an extended Fab (56 high, whatever `size`). */
+    label?: string;
+    /** Edge of the square button: `sm` 40, `md` 56, `lg` 96. Defaults to `md`. */
+    size?: FabSize;
+    /** Colour role: a `primary` or `accent` fill, or the `surface` colour with a text-coloured glyph. Defaults to `primary`. */
+    tone?: FabTone;
+    /** Floats on a shadow (and a hairline on dark themes). Defaults to `true`. */
+    elevated?: boolean;
+    /** Disables interaction and dims the button. */
+    disabled?: boolean;
+    /** Styled slots for every visual part. */
+    styled?: {
+        /** The button — place it with absolute offsets here. */
+        style?: StyledProp<ViewStyle>;
+        /** The glyph (`color`). */
+        styleIcon?: StyledProp<ViewStyle & {
+            color?: string;
+        }>;
+        /** The label text. */
+        styleLabel?: StyledProp<TextStyle>;
+    };
+}
+/**
+ * A floating action button for the screen's one primary action (compose,
+ * add, start). Icon-only by default; a `label` makes it an extended Fab.
+ * Placement is the author's: put absolute offsets in `styled.style`
+ * (`position: 'absolute', right: 16, bottom: 16`) inside the page root. An
+ * icon-only Fab needs an `accessibilityLabel`.
+ *
+ * @example
+ * ```tsx
+ * <Fab
+ *   iconName="add"
+ *   accessibilityLabel="New note"
+ *   onPress={compose}
+ *   styled={{ style: { position: 'absolute', right: 16, bottom: 16 } }}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const Fab: import("react").ForwardRefExoticComponent<FabProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default Fab;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/actions/Fab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Fab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EAGX,MAAM,gBAAgB,CAAC;AASxB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK1E,OAAO,EAIL,OAAO,EACP,OAAO,EACR,MAAM,SAAS,CAAC;AAEjB,6BAA6B;AAC7B,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1E,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4HAA4H;IAC5H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QACP,wDAAwD;QACxD,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAC9B,2BAA2B;QAC3B,SAAS,CAAC,EAAE,UAAU,CAAC,SAAS,GAAG;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACvD,sBAAsB;QACtB,UAAU,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,GAAG;;wCAgHR,CAAC;AAGF,eAAe,GAAG,CAAC"}

package/dist/components/actions/Fab/index.js

@@ -0,0 +1,84 @@
+import { forwardRef } from 'react';
+import { StyledPressable, StyledView, Typography, } from '@mapples/style';
+import { DISABLED_OPACITY, ELEVATION, Icon, Tokens, TYPOGRAPHY_PARTS, useTones, } from '@mapples/ui';
+import { useInteractionState, useSlotColor } from '../../../internal';
+import { defaults } from './defaults';
+import { FAB_EXTENDED, FAB_GEOMETRY, FAB_TOUCH_TARGET, } from './types';
+/**
+ * A floating action button for the screen's one primary action (compose,
+ * add, start). Icon-only by default; a `label` makes it an extended Fab.
+ * Placement is the author's: put absolute offsets in `styled.style`
+ * (`position: 'absolute', right: 16, bottom: 16`) inside the page root. An
+ * icon-only Fab needs an `accessibilityLabel`.
+ *
+ * @example
+ * ```tsx
+ * <Fab
+ *   iconName="add"
+ *   accessibilityLabel="New note"
+ *   onPress={compose}
+ *   styled={{ style: { position: 'absolute', right: 16, bottom: 16 } }}
+ * />
+ * ```
+ *
+ * @public
+ */
+const Fab = forwardRef(({ iconName = 'add', label, size = 'md', tone = 'primary', elevated = true, disabled, accessibilityLabel, onPressIn, onPressOut, onHoverIn, onHoverOut, styled, 
+// The canvas injects a drop area as children; leaf components ignore them.
+children: _children, ...rest }, ref) => {
+    const tones = useTones();
+    const isDisabled = !!disabled;
+    const extended = !!label;
+    const geometry = FAB_GEOMETRY[size];
+    const interaction = useInteractionState({ onPressIn, onPressOut, onHoverIn, onHoverOut }, isDisabled);
+    const background = tone === 'surface'
+        ? tones.resolve(Tokens.color.surface)
+        : tones.tone(tone).main;
+    const foreground = tone === 'surface'
+        ? tones.resolve(Tokens.color.text)
+        : tones.tone(tone).contrast;
+    const labelColor = useSlotColor(styled?.styleLabel, 'color', foreground);
+    const glyphColor = useSlotColor(styled?.styleIcon, 'color', foreground);
+    const radius = extended ? FAB_EXTENDED.radius : geometry.radius;
+    const hitSlop = extended
+        ? 0
+        : Math.max(0, (FAB_TOUCH_TARGET - geometry.edge) / 2);
+    return (<StyledPressable ref={ref} accessibilityRole="button" accessibilityLabel={label || accessibilityLabel} accessibilityState={{ disabled: isDisabled }} disabled={isDisabled} hitSlop={hitSlop} {...interaction.handlers} styled={{
+            style: [
+                defaults.root,
+                extended
+                    ? {
+                        height: FAB_EXTENDED.height,
+                        paddingHorizontal: FAB_EXTENDED.paddingX,
+                        gap: FAB_EXTENDED.gap,
+                    }
+                    : { width: geometry.edge, height: geometry.edge },
+                {
+                    borderRadius: radius,
+                    backgroundColor: background,
+                    borderWidth: elevated && tones.isDark ? 1 : 0,
+                    borderColor: tones.outline,
+                },
+                elevated && { boxShadow: ELEVATION },
+                styled?.style,
+                isDisabled && { opacity: DISABLED_OPACITY },
+            ],
+        }} {...rest}>
+        {(interaction.pressed || interaction.hovered) && (<StyledView pointerEvents="none" styled={{
+                style: [
+                    defaults.stateLayer,
+                    {
+                        borderRadius: radius,
+                        backgroundColor: tones.stateLayer(foreground, interaction.pressed ? 'pressed' : 'hover'),
+                    },
+                ],
+            }}/>)}
+        <Icon iconName={iconName} size={extended ? FAB_EXTENDED.icon : geometry.icon} color={glyphColor}/>
+        {extended ? (<Typography variant={TYPOGRAPHY_PARTS.button} numberOfLines={1} style={[{ color: labelColor }, styled?.styleLabel]}>
+            {label}
+          </Typography>) : null}
+      </StyledPressable>);
+});
+Fab.displayName = 'Fab';
+export default Fab;
+//# sourceMappingURL=index.js.map

package/dist/components/actions/Fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actions/Fab/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/actions/Fab/schematic.d.ts

@@ -0,0 +1,4 @@
+import { RegisteredComponent } from '@mapples/types';
+/** Registers {@link Fab} under the `'Fab'` type key. */
+export declare const FabSchematic: RegisteredComponent;
+//# sourceMappingURL=schematic.d.ts.map

package/dist/components/actions/Fab/schematic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematic.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/Fab/schematic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,wDAAwD;AACxD,eAAO,MAAM,YAAY,EAAE,mBAG1B,CAAC"}

package/dist/components/actions/Fab/schematic.js

@@ -0,0 +1,7 @@
+import Fab from './index';
+/** Registers {@link Fab} under the `'Fab'` type key. */
+export const FabSchematic = {
+    type: 'Fab',
+    Component: Fab,
+};
+//# sourceMappingURL=schematic.js.map