panelui-native 0.16.0 → 0.20.1

package/src/components/slider/index.tsx

@@ -36,6 +36,7 @@ import Animated, {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { getNativeUI } from '../../native';
 import { Text } from '../../primitives/text';
+import { selectionTick } from '../../utils/haptics';
 
 /**
  * Springs the thumb onto its resting step after a drag or a track tap. Drags
@@ -127,6 +128,12 @@ export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
   showValue?: boolean;
   /** Format the shown value. Defaults to the rounded number. */
   formatValue?: (value: number) => string;
+  /**
+   * A tick under the finger each time a drag crosses onto a new step, and once
+   * more when the drag ends. Off by default — needs the optional `expo-haptics`,
+   * and is silent without it.
+   */
+  haptics?: boolean;
   /** Extra classes for the caption row. */
   headerClassName?: string;
   /** Extra classes for the unfilled track. */
@@ -170,6 +177,7 @@ export const Slider = forwardRef<View, SliderProps>(
       label,
       showValue = false,
       formatValue,
+      haptics = false,
       color = 'primary',
       size = 'md',
     },
@@ -197,6 +205,9 @@ export const Slider = forwardRef<View, SliderProps>(
     changeRef.current = onValueChange;
     const commitRef = useRef(onValueCommit);
     commitRef.current = onValueCommit;
+    // The last step a drag ticked on, so haptics fire once per step, not per
+    // pixel of movement within it.
+    const lastTick = useRef(value);
 
     const emitChange = useCallback(
       (next: number) => {
@@ -223,10 +234,14 @@ export const Slider = forwardRef<View, SliderProps>(
       (p: number, commit: boolean) => {
         const raw = min + p * (max - min);
         const snapped = snap(raw, min, max, step);
+        if (haptics && snapped !== lastTick.current) {
+          lastTick.current = snapped;
+          selectionTick();
+        }
         emitChange(snapped);
         if (commit) emitCommit(snapped);
       },
-      [min, max, step, emitChange, emitCommit]
+      [min, max, step, haptics, emitChange, emitCommit]
     );
 
     const pan = Gesture.Pan()
@@ -280,6 +295,10 @@ export const Slider = forwardRef<View, SliderProps>(
     const nudge = (dir: 1 | -1) => {
       const next = snap(value + dir * (step || 1), min, max, step);
       if (next === value) return;
+      if (haptics) {
+        lastTick.current = next;
+        selectionTick();
+      }
       progress.value = withSpring(max > min ? (next - min) / (max - min) : 0, SPRING);
       emitChange(next);
       emitCommit(next);

package/src/icons/index.tsx

@@ -80,6 +80,21 @@ export function CheckIcon({ size = 14, color, ...props }: IconProps) {
   );
 }
 
+export function MinusIcon({ size = 14, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#fff');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M5 12h14"
+        stroke={resolved}
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function ChevronDownIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -546,3 +561,173 @@ export function PauseIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/**
+ * A five-pointed star — the mark of a Rating. `filled` paints the interior;
+ * left hollow it is the outline of an unearned star. Both share the same
+ * geometry, so a filled star clipped over an empty one lines up to the pixel.
+ */
+export function StarIcon({
+  size = 20,
+  color,
+  filled = false,
+  ...props
+}: IconProps & { filled?: boolean }) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.82 6.2 20.86l1.11-6.46-4.7-4.58 6.49-.94z"
+        fill={filled ? resolved : 'none'}
+        stroke={resolved}
+        strokeWidth={1.6}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+/** A pencil at an angle — draw, sign, edit by hand. */
+export function PencilIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** An arrow curling anticlockwise — undo, reset, start over. */
+export function RotateCcwIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M3 12a9 9 0 1 0 2.64-6.36L3 8"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M3 3v5h5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A bin — discard what is there. */
+export function TrashIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M4 7h16M10 4h4M6 7l1 13h10l1-13"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** An arrow into a tray — save the thing to a file. */
+export function DownloadIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M12 3v12m0 0 4-4m-4 4-4-4M4 19h16"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A cross of two strokes — zoom in, add. Pairs with MinusIcon. */
+export function PlusIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M12 5v14M5 12h14"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+/** Four corners pushing outward — fit everything into view. */
+export function MaximizeIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A closed padlock — the thing behind it cannot be moved. */
+export function LockIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M5 11h14v10H5z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M8 11V7a4 4 0 0 1 8 0v4"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+/** The same padlock with its shackle swung open — freely movable. */
+export function UnlockIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M5 11h14v10H5z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M8 11V7a4 4 0 0 1 7.5-2"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -104,6 +104,24 @@ export {
   type DirectionProps,
   type DirectionValue,
 } from './components/direction';
+export {
+  Flow,
+  type FlowProps,
+  type FlowNodeProps,
+  type FlowHandleProps,
+  type FlowEdgeProps,
+  type FlowGroupProps,
+  type FlowBackgroundProps,
+  type FlowControlsProps,
+  type FlowMiniMapProps,
+  type FlowConnection,
+  type FlowViewport,
+  type FlowNodePosition,
+  type FlowEdgeVariant,
+  type FlowSide,
+  type FlowRect,
+  type FlowPoint,
+} from './components/flow';
 export {
   Frame,
   type FrameProps,
@@ -111,6 +129,11 @@ export {
   type FramePanelProps,
   type FrameRowProps,
   type FrameSectionProps,
+  type FrameHeaderProps,
+  type FrameActionProps,
+  type FrameMediaProps,
+  type FrameContentProps,
+  type FrameActionsProps,
   type FrameVariant,
 } from './components/frame';
 export {
@@ -167,6 +190,34 @@ export {
   type EmptyStateProps,
   type EmptyStateMediaProps,
 } from './components/empty-state';
+export {
+  Field,
+  type FieldProps,
+  type FieldContentProps,
+  type FieldLabelProps,
+  type FieldDescriptionProps,
+  type FieldErrorProps,
+  type FieldSetProps,
+  type FieldLegendProps,
+  type FieldGroupProps,
+  type FieldSeparatorProps,
+  type FieldTitleProps,
+} from './components/field';
+export {
+  Form,
+  useForm,
+  useField,
+  type FormProps,
+  type FormFieldProps,
+  type FormApi,
+  type FieldErrors,
+  type FieldTouched,
+  type FieldState,
+  type UseFormOptions,
+  type Validator,
+  type FormFieldRenderProps,
+  type UseFieldOptions,
+} from './components/form';
 export { Input, type InputProps } from './components/input';
 export {
   InputGroup,
@@ -174,6 +225,7 @@ export {
   type InputGroupInputProps,
   type InputGroupDecoratorProps,
 } from './components/input-group';
+export { OtpInput, type OtpInputProps } from './components/otp-input';
 export {
   Item,
   type ItemProps,
@@ -250,11 +302,28 @@ export {
   type RadioGroupProps,
   type RadioGroupItemProps,
 } from './components/radio-group';
+export {
+  Rating,
+  type RatingProps,
+  type RatingColor,
+  type RatingSize,
+} from './components/rating';
 export {
   ScrollFade,
   type ScrollFadeProps,
 } from './components/scroll-fade';
 export { Separator, type SeparatorProps } from './components/separator';
+export {
+  Signature,
+  hasSignatureFileSystem,
+  hasSignatureRaster,
+  type SignatureProps,
+  type SignatureHandle,
+  type SignatureFile,
+  type SignatureSaveOptions,
+  type SignatureToolbarProps,
+  type SignatureButtonProps,
+} from './components/signature';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
 export {
   ScrollText,
@@ -331,26 +400,35 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  DownloadIcon,
   FacebookIcon,
   FileIcon,
   GoogleIcon,
   IconColorProvider,
   InfoIcon,
   ImageIcon,
+  LockIcon,
+  MaximizeIcon,
   MicIcon,
+  MinusIcon,
   MoonIcon,
   PackageIcon,
   PaperclipIcon,
   PauseIcon,
+  PencilIcon,
   PlayIcon,
+  PlusIcon,
   PlusSquareIcon,
   ReceiptIcon,
+  RotateCcwIcon,
   SearchIcon,
   SendIcon,
   ShareNodesIcon,
   ShieldAlertIcon,
   ShieldCheckIcon,
   SunIcon,
+  TrashIcon,
+  UnlockIcon,
   XIcon,
   useIconColor,
   type IconProps,