panelui-native 0.14.0 → 0.19.0

package/src/components/typography/index.tsx

@@ -1,14 +1,32 @@
 /**
- * Typography — semantic text presets.
+ * Typography — semantic text presets, and the marks that go on them.
  *
  * The type scale in one place, so headings stay consistent instead of being
  * rebuilt out of size and weight classes at each call site. Built on the Text
  * primitive, so every preset keeps `className` passthrough and theme colours.
+ *
+ * ```tsx
+ * <Typography type="h2">Billing</Typography>
+ * <Typography>Your plan renews on the 1st.</Typography>
+ * <Typography underline>Terms of service</Typography>
+ * ```
+ *
+ * A preset sets size, weight and tracking together; the marks — `underline`,
+ * `italic`, `strike` — and `weight`, `align` and `transform` layer on top of
+ * whichever preset is in force. They are props rather than class names because
+ * the point of this component is that a screen never has to know which
+ * utilities add up to "a bolded lead paragraph".
+ *
+ * React Native draws no list markers and has no blockquote, so
+ * `Typography.List` and `Typography.Blockquote` build both out of a row and a
+ * rule — which is exactly the kind of thing this component exists to stop
+ * people rebuilding per screen.
  */
-import { forwardRef } from 'react';
+import { Children, forwardRef, type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { Text, type TextProps } from '../../primitives/text';
+import { cn } from '../../utils/cn';
 
 const typographyVariants = tv({
   base: 'text-foreground',
@@ -20,11 +38,43 @@ const typographyVariants = tv({
       h4: 'text-xl font-semibold',
       h5: 'text-lg font-semibold',
       h6: 'text-base font-semibold',
+      /** The sentence under a heading, set larger and quieter than body. */
+      lead: 'text-xl font-normal text-muted-foreground',
       body: 'text-base font-normal',
       'body-sm': 'text-sm font-normal',
       'body-xs': 'text-xs font-normal',
+      /** Body, one step up — for a number or a name that carries the row. */
+      large: 'text-lg font-semibold',
+      /** Body, one step down and tighter — captions, footnotes, meta. */
+      small: 'text-sm font-medium leading-none',
+      blockquote: 'text-base font-normal italic',
       code: 'font-mono text-sm text-foreground',
     },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+    transform: {
+      uppercase: 'uppercase',
+      lowercase: 'lowercase',
+      capitalize: 'capitalize',
+    },
+    underline: {
+      true: 'underline',
+    },
+    italic: {
+      true: 'italic',
+    },
+    strike: {
+      true: 'line-through',
+    },
     muted: {
       true: 'text-muted-foreground',
     },
@@ -38,16 +88,38 @@ export type TypographyType = NonNullable<
   VariantProps<typeof typographyVariants>['type']
 >;
 
+export type TypographyWeight = NonNullable<
+  VariantProps<typeof typographyVariants>['weight']
+>;
+
 export interface TypographyProps
   extends Omit<TextProps, 'size' | 'weight'>,
     VariantProps<typeof typographyVariants> {
   className?: string;
+  /**
+   * Overrides the weight the preset sets. This is the one to reach for when a
+   * paragraph needs a bolded run and a heading would be wrong.
+   */
+  weight?: TypographyWeight;
+  /** Underlines the text — a link, a defined term, a signature line. */
+  underline?: boolean;
+  /** Slants the text. */
+  italic?: boolean;
+  /** Strikes the text through: an old price, a completed task. */
+  strike?: boolean;
+  /** Horizontal alignment within whatever the text is laid out in. */
+  align?: 'left' | 'center' | 'right';
+  /** Case, applied for display without changing the string underneath. */
+  transform?: 'uppercase' | 'lowercase' | 'capitalize';
 }
 
 /** Heading levels, for `Typography.Heading`. */
 type HeadingType = Extract<TypographyType, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
 /** Body sizes, for `Typography.Paragraph`. */
-type ParagraphType = Extract<TypographyType, 'body' | 'body-sm' | 'body-xs'>;
+type ParagraphType = Extract<
+  TypographyType,
+  'body' | 'body-sm' | 'body-xs' | 'lead' | 'large' | 'small'
+>;
 
 /** Maps a heading preset to its accessibility heading level. */
 const HEADING_LEVEL: Record<HeadingType, number> = {
@@ -60,8 +132,25 @@ const HEADING_LEVEL: Record<HeadingType, number> = {
 };
 
 const TypographyRoot = forwardRef<RNText, TypographyProps>(
-  ({ className, type, muted, ...props }, ref) => (
-    <Text ref={ref} className={typographyVariants({ type, muted, className })} {...props} />
+  (
+    { className, type, muted, weight, align, transform, underline, italic, strike, ...props },
+    ref
+  ) => (
+    <Text
+      ref={ref}
+      className={typographyVariants({
+        type,
+        muted,
+        weight,
+        align,
+        transform,
+        underline,
+        italic,
+        strike,
+        className,
+      })}
+      {...props}
+    />
   )
 );
 TypographyRoot.displayName = 'Typography';
@@ -72,12 +161,25 @@ export interface TypographyHeadingProps extends Omit<TypographyProps, 'type'> {
 
 /** Heading text, wired up with the matching accessibility heading level. */
 const TypographyHeading = forwardRef<RNText, TypographyHeadingProps>(
-  ({ className, type = 'h2', muted, ...props }, ref) => (
+  (
+    { className, type = 'h2', muted, weight, align, transform, underline, italic, strike, ...props },
+    ref
+  ) => (
     <Text
       ref={ref}
       accessibilityRole="header"
       aria-level={HEADING_LEVEL[type]}
-      className={typographyVariants({ type, muted, className })}
+      className={typographyVariants({
+        type,
+        muted,
+        weight,
+        align,
+        transform,
+        underline,
+        italic,
+        strike,
+        className,
+      })}
       {...props}
     />
   )
@@ -89,8 +191,25 @@ export interface TypographyParagraphProps extends Omit<TypographyProps, 'type'>
 }
 
 const TypographyParagraph = forwardRef<RNText, TypographyParagraphProps>(
-  ({ className, type = 'body', muted, ...props }, ref) => (
-    <Text ref={ref} className={typographyVariants({ type, muted, className })} {...props} />
+  (
+    { className, type = 'body', muted, weight, align, transform, underline, italic, strike, ...props },
+    ref
+  ) => (
+    <Text
+      ref={ref}
+      className={typographyVariants({
+        type,
+        muted,
+        weight,
+        align,
+        transform,
+        underline,
+        italic,
+        strike,
+        className,
+      })}
+      {...props}
+    />
   )
 );
 TypographyParagraph.displayName = 'Typography.Paragraph';
@@ -106,7 +225,7 @@ const TypographyCode = forwardRef<View, TypographyCodeProps & Pick<ViewProps, 't
     <View
       ref={ref}
       testID={testID}
-      className={`self-start rounded-md bg-muted px-1.5 py-1 ${containerClassName ?? ''}`}
+      className={cn('self-start rounded-md bg-muted px-1.5 py-1', containerClassName)}
     >
       <Text className={typographyVariants({ type: 'code', muted, className })} {...props} />
     </View>
@@ -114,8 +233,110 @@ const TypographyCode = forwardRef<View, TypographyCodeProps & Pick<ViewProps, 't
 );
 TypographyCode.displayName = 'Typography.Code';
 
+export interface TypographyBlockquoteProps extends Omit<TypographyProps, 'type'> {
+  /** Classes for the row that carries the rule. */
+  containerClassName?: string;
+}
+
+/**
+ * A quotation, marked by a rule down its leading edge.
+ *
+ * The rule uses `border-s`, so it moves to the right-hand side under a
+ * right-to-left `Direction` without the quote having to know.
+ */
+const TypographyBlockquote = forwardRef<View, TypographyBlockquoteProps>(
+  ({ className, containerClassName, muted, weight, align, transform, underline, italic = true, strike, children, ...props }, ref) => (
+    <View ref={ref} className={cn('border-s-2 border-border ps-4', containerClassName)}>
+      <Text
+        className={typographyVariants({
+          type: 'blockquote',
+          muted,
+          weight,
+          align,
+          transform,
+          underline,
+          italic,
+          strike,
+          className,
+        })}
+        {...props}
+      >
+        {children}
+      </Text>
+    </View>
+  )
+);
+TypographyBlockquote.displayName = 'Typography.Blockquote';
+
+export interface TypographyListProps extends ViewProps {
+  className?: string;
+  /** Numbered rather than bulleted. The numbers are drawn, not counted by CSS. */
+  ordered?: boolean;
+  children?: ReactNode;
+}
+
+/**
+ * A bulleted or numbered list.
+ *
+ * React Native has no list markers at all, so each row is a marker and a text
+ * block side by side. The marker is drawn here rather than in the item, because
+ * only the list knows whether it is a bullet or a number — and only the list
+ * knows which number.
+ */
+const TypographyList = forwardRef<View, TypographyListProps>(
+  ({ className, ordered = false, children, ...props }, ref) => (
+    <View ref={ref} accessibilityRole="list" className={cn('gap-2', className)} {...props}>
+      {Children.map(children, (child, index) => (
+        <View className="w-full flex-row gap-2">
+          {ordered ? (
+            <Text className="text-base text-muted-foreground">{index + 1}.</Text>
+          ) : (
+            // A dot rather than "•": the character's size and baseline vary by
+            // platform font, and a view does not.
+            <View className="mt-2.5 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
+          )}
+          <View className="flex-1">{child}</View>
+        </View>
+      ))}
+    </View>
+  )
+);
+TypographyList.displayName = 'Typography.List';
+
+export interface TypographyListItemProps extends Omit<TypographyProps, 'type'> {
+  type?: ParagraphType;
+}
+
+/** One line of a list. The marker beside it belongs to the list. */
+const TypographyListItem = forwardRef<RNText, TypographyListItemProps>(
+  (
+    { className, type = 'body', muted, weight, align, transform, underline, italic, strike, ...props },
+    ref
+  ) => (
+    <Text
+      ref={ref}
+      className={typographyVariants({
+        type,
+        muted,
+        weight,
+        align,
+        transform,
+        underline,
+        italic,
+        strike,
+        className,
+      })}
+      {...props}
+    />
+  )
+);
+TypographyListItem.displayName = 'Typography.ListItem';
+
 export const Typography = Object.assign(TypographyRoot, {
   Heading: TypographyHeading,
   Paragraph: TypographyParagraph,
   Code: TypographyCode,
+  Blockquote: TypographyBlockquote,
+  List: TypographyList,
+  ListItem: TypographyListItem,
 });

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 (
@@ -510,3 +525,183 @@ export function PaperclipIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/** A capsule on a stand — a microphone, for anything voice. */
+export function MicIcon({ 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 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11v1a7 7 0 0 0 14 0v-1M12 19v3"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A filled triangle — start playback. */
+export function PlayIcon({ 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="M7 4.5v15l13-7.5z" fill={resolved} stroke={resolved} strokeWidth={2} strokeLinejoin="round" />
+    </Svg>
+  );
+}
+
+/** Two filled bars — hold playback where it is. */
+export function PauseIcon({ 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 5h2v14H8zM14 5h2v14h-2z" fill={resolved} stroke={resolved} strokeWidth={1.5} strokeLinejoin="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

@@ -92,6 +92,36 @@ export {
   type DialogProps,
   type DialogContentProps,
 } from './components/dialog';
+export {
+  Soundwave,
+  type SoundwaveProps,
+  type SoundwaveState,
+  type SoundwaveVariant,
+} from './components/soundwave';
+export {
+  Direction,
+  useDirection,
+  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,
@@ -99,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 {
@@ -155,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,
@@ -162,6 +225,7 @@ export {
   type InputGroupInputProps,
   type InputGroupDecoratorProps,
 } from './components/input-group';
+export { OtpInput, type OtpInputProps } from './components/otp-input';
 export {
   Item,
   type ItemProps,
@@ -243,6 +307,17 @@ export {
   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,
@@ -319,23 +394,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,