@tastic/profile 0.13.0 → 0.14.1

package/README.md

@@ -51,8 +51,12 @@ see its own doc comment for why that component is generic over your own `Profile
   only - creating, renaming, and deleting all live in `ProfilesManager`. Generic over your own
   `Profile` type (see above). Placement props (all optional, see "Fake-rotated frames" below):
   `align` (force a horizontal side), `alignOverride` (substitute the whole placement result), and
-  `rotation` (forwarded to the automatic measurement). Also exports
-  `getProfilePickerContentSize(profileCount, hasManageRow?)` - the popover's
+  `rotation` (forwarded to the automatic measurement). `colorSection`
+  (`{ value, onChange, previewValue?, swatches?, label?, caption? }`) puts a Color row at the top of
+  the popover that opens a page of swatches (with a back row), and turns the trigger into one
+  button that leads with a chip in `color` with the selected profile's tag; `triggerStyle` styles
+  that button. Also exports
+  `getProfilePickerContentSize(profileCount, hasManageRow?, colorSection?)` - the popover's
   `{ width, height }`, for sizing your own placement hook.
 - **`ProfilesManager`**: the roster screen itself: create/rename/recolor/retag/delete, editing
   inline in the row you tap, with a destructive-delete confirmation. No navigation of its own (no
@@ -142,7 +146,10 @@ const placement = useMyRotatedAlign(open, width, height) // returns a ProfilePic
 
 `getProfilePickerContentSize(profileCount, hasManageRow = false)` returns `{ width, height }`: 220
 wide, and `8 * 2 + (profileCount + 1 + (hasManageRow ? 1 : 0)) * 36` tall (the null/"guest" row, one
-row per profile, and the Manage row when `onManage` is passed).
+row per profile, and the Manage row when `onManage` is passed), or with a color section (pass the same
+object the picker gets) the taller of its two pages: that list plus the Color row (48 with a
+caption, 36 without) and its 9pt divider, or the color page (a 36pt back row and the swatches, 187
+for 20 colors), plus the padding.
 
 
 #### The Profiles screen's color swatch: `useColorPickerAlign`

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, RefObject, Ref } from 'react';
+import { SeedColor } from '@rific/auto-paper';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 interface Profile {
     id: string;
@@ -27,6 +28,14 @@ declare function ProfileColorProvider({ preview, children }: ProfileColorProvide
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
+interface ProfilePickerColorSection {
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    label?: string;
+    caption?: string;
+}
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -38,7 +47,7 @@ interface ProfilePickerContentSize {
     width: number;
     height: number;
 }
-declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -55,8 +64,10 @@ interface ProfilePickerProps<P extends Profile> {
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
+    colorSection?: ProfilePickerColorSection;
+    triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -217,4 +228,4 @@ declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode, RefObject, Ref } from 'react';
+import { SeedColor } from '@rific/auto-paper';
 import { PopoverHost, PopoverRotation } from '@tastic/hud';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 interface Profile {
     id: string;
@@ -27,6 +28,14 @@ declare function ProfileColorProvider({ preview, children }: ProfileColorProvide
 declare function useProfileColorPreview(): ((hex: string) => string) | undefined;
 declare function useProfileDisplayColor(hex: string): string;
 
+interface ProfilePickerColorSection {
+    value: string;
+    onChange: (hex: string) => void;
+    previewValue?: (hex: string) => string;
+    swatches?: SeedColor[];
+    label?: string;
+    caption?: string;
+}
 interface ProfilePickerAlignResult {
     align: 'left' | 'right' | 'center';
     verticalAlign: 'below' | 'above';
@@ -38,7 +47,7 @@ interface ProfilePickerContentSize {
     width: number;
     height: number;
 }
-declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean): ProfilePickerContentSize;
+declare function getProfilePickerContentSize(profileCount: number, hasManageRow?: boolean, colorSection?: Pick<ProfilePickerColorSection, 'swatches' | 'caption'>): ProfilePickerContentSize;
 interface ProfilePickerProps<P extends Profile> {
     idPrefix: string;
     host: PopoverHost;
@@ -55,8 +64,10 @@ interface ProfilePickerProps<P extends Profile> {
     nullIcon?: string;
     onSelect: (profile: P | null) => void;
     onManage?: () => void;
+    colorSection?: ProfilePickerColorSection;
+    triggerStyle?: StyleProp<ViewStyle>;
 }
-declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage }: ProfilePickerProps<P>): react.JSX.Element;
+declare function ProfilePicker<P extends Profile>({ idPrefix, host, profiles, selectedId, takenId, color, dark, align: forcedAlign, alignOverride, rotation, guestLabel, nullLabel, nullIcon, onSelect, onManage, colorSection, triggerStyle }: ProfilePickerProps<P>): react.JSX.Element;
 
 type MD3TextVariant$1 = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface ProfileEditPatch {
@@ -217,4 +228,4 @@ declare function readSharedProfiles(groupId: string): Promise<Profile[] | null>;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };
+export { type CreateProfileInput, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfileColorProvider, type ProfileEditPatch, type ProfileExtensionActions, type ProfileExtensionSlice, type ProfileExtensionState, ProfilePicker, type ProfilePickerAlignResult, type ProfilePickerColorSection, type ProfilePickerContentSize, type ProfileSelectionActions, type ProfileSelectionSlice, type ProfileSelectionState, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, ProfilesScreen, type ProfilesScreenProps, type SeatColorsActions, type SeatColorsSlice, type SeatColorsState, type SelectProfilePayload, type SetLastGuestColorPayload, type SetProfileExtensionPayload, type SetProfileOverridePayload, type UpdateProfilePayload, type UseSharedProfilesSyncOptions, type UseSharedProfilesSyncResult, avoidSeatColorClash, createProfileExtensionSlice, createProfileRecord, createProfileSelectionSlice, createSeatColorsSlice, getProfilePickerContentSize, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, profilesActions, profilesReducer, readSharedProfiles, resolveInitialProfiles, saveSharedProfiles, useProfileColorPreview, useProfileDisplayColor, useSharedProfilesSync };