panelui-native 0.46.0 → 0.51.1

package/src/icons/index.tsx

@@ -665,6 +665,160 @@ export function FileIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
+/* ------------------------------------------------------------------ *
+ * Text formatting. Drawn as the letterforms and marks an editor's
+ * toolbar uses, rather than as pictures of them — a B that is a bold B
+ * is read before it is recognised.
+ * ------------------------------------------------------------------ */
+
+/** Bold — the two-bowled B. */
+export function BoldIcon({ 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="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Italic — a slanted stroke between its serifs. */
+export function ItalicIcon({ 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="M19 4h-9M14 20H5M15 4 9 20"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Heading — the crossbar H. */
+export function HeadingIcon({ 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="M6 12h12M6 20V4M18 20V4"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Bulleted list — three rules, each behind a dot. */
+export function ListIcon({ 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 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Numbered list — the same rules, counted. */
+export function ListOrderedIcon({ 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="M10 6h11M10 12h11M10 18h11M4 4h1v4M4 8h2M6 15a1.5 1.5 0 1 0-2-1.4M4 17l2-2M4 17h2"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Block quote — the rule a quoted passage is set behind. */
+export function QuoteIcon({ 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 5v14M9 7h11M9 12h11M9 17h7"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Code — the pair of angle brackets. */
+export function CodeIcon({ 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 18-6-6 6-6M16 6l6 6-6 6"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Closed folder with a tab — a branch nobody has opened yet. */
+export function FolderIcon({ 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="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/**
+ * Folder tipped open, its front face sheared to the side — the same branch
+ * once it is expanded. Drawn as a separate glyph rather than a rotation of
+ * `FolderIcon`, because a folder that opens by spinning reads as a mistake.
+ */
+export function FolderOpenIcon({ 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="M6 14l1.45-2.9A2 2 0 0 1 9.24 10H22a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 /** Framed picture with a sun and a corner peak — an image attachment. */
 export function ImageIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
@@ -837,6 +991,28 @@ export function TrashIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
+/**
+ * Two columns of dots — the grip on a row that can be dragged somewhere else.
+ *
+ * Dots rather than the stacked rules of a menu glyph, and two columns rather
+ * than one: the pattern has to read as a surface to take hold of from either
+ * side, and a single column reads as a divider instead.
+ */
+export function GripVerticalIcon({ 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="M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
+        stroke={resolved}
+        strokeWidth={2.5}
+        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');

package/src/index.ts

@@ -124,7 +124,17 @@ export {
   type BreadcrumbSeparatorProps,
   type BreadcrumbEllipsisProps,
 } from './components/breadcrumb';
-export { Button, type ButtonProps } from './components/button';
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from './components/button';
+export {
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonGroupOrientation,
+} from './components/button-group';
 export {
   ToggleButton,
   ToggleButtonGroup,
@@ -164,6 +174,15 @@ export {
   type DirectionProps,
   type DirectionValue,
 } from './components/direction';
+export {
+  Fab,
+  type FabProps,
+  type FabGroupProps,
+  type FabActionProps,
+  type FabPlacement,
+  type FabSize,
+  type FabVariant,
+} from './components/fab';
 export {
   Flow,
   type FlowProps,
@@ -339,6 +358,8 @@ export {
 export {
   ColorPicker,
   type ColorPickerProps,
+  type ColorPickerTriggerProps,
+  type ColorPickerContentProps,
   type ColorPickerFieldProps,
   type ColorPickerAreaProps,
   type ColorPickerWheelProps,
@@ -350,6 +371,7 @@ export {
   type ColorPickerPreviewProps,
   type ColorPickerSwatchesProps,
   type ColorPickerSize,
+  type ColorPickerPresentation,
 } from './components/color-picker';
 export {
   Combobox,
@@ -526,6 +548,17 @@ export {
   type LoaderVariant,
   type LoaderSize,
 } from './components/loader';
+export {
+  MarkdownEditor,
+  type MarkdownEditorProps,
+  type MarkdownEditorToolbarProps,
+  type MarkdownEditorInputProps,
+  type MarkdownEditorPreviewProps,
+  type MarkdownEditorMode,
+  type MarkdownEditorAction,
+  type EditorSelection,
+  type EditResult,
+} from './components/markdown-editor';
 export {
   Marker,
   type MarkerProps,
@@ -600,6 +633,28 @@ export {
   type PostVote,
 } from './components/post';
 export { Progress, type ProgressProps } from './components/progress';
+export {
+  Questionnaire,
+  type QuestionnaireProps,
+  type QuestionnaireTitleProps,
+  type QuestionnaireProgressProps,
+  type QuestionnaireProgressState,
+  type QuestionnaireProgressVariant,
+  type QuestionnaireItemProps,
+  type QuestionnaireQuestionProps,
+  type QuestionnaireDescriptionProps,
+  type QuestionnaireChoicesProps,
+  type QuestionnaireChoiceProps,
+  type QuestionnaireInputProps,
+  type QuestionnaireErrorProps,
+  type QuestionnaireFooterProps,
+  type QuestionnaireActionProps,
+  type QuestionnaireActionState,
+  type QuestionnaireAnswers,
+  type QuestionnaireItemDefinition,
+  type QuestionnaireItemStatus,
+  type QuestionnaireShortcutMode,
+} from './components/questionnaire';
 export {
   RadioGroup,
   type RadioGroupProps,
@@ -741,6 +796,16 @@ export {
 } from './components/thinking-orb';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
 export { Slider, type SliderProps } from './components/slider';
+export {
+  Sortable,
+  reorderItems,
+  useSortableItem,
+  type SortableProps,
+  type SortableItemProps,
+  type SortableHandleProps,
+  type SortableActivation,
+  type SortableReorderDetails,
+} from './components/sortable';
 export { Spinner, type SpinnerProps } from './components/spinner';
 export {
   Steps,
@@ -755,7 +820,9 @@ export {
 export { Surface, type SurfaceProps } from './components/surface';
 export {
   Swipe,
+  useSwipeGroup,
   type SwipeProps,
+  type SwipeGroupProps,
   type SwipePanelProps,
   type SwipeActionProps,
   type SwipeActionColor,
@@ -792,6 +859,18 @@ export {
   type ToastIndicatorProps,
   type ToastCloseProps,
 } from './components/toast';
+export {
+  Tree,
+  type TreeProps,
+  type TreeItemProps,
+  type TreeTriggerProps,
+  type TreeIndicatorProps,
+  type TreeIconProps,
+  type TreeActionsProps,
+  type TreeGroupProps,
+  type TreeSize,
+  type TreeSelectionMode,
+} from './components/tree';
 export {
   Tooltip,
   type TooltipProps,
@@ -824,6 +903,7 @@ export {
   BadgeCheckIcon,
   BellIcon,
   BookmarkIcon,
+  BoldIcon,
   CalendarIcon,
   CardIcon,
   CheckCircleIcon,
@@ -833,6 +913,7 @@ export {
   ChevronRightIcon,
   ChevronUpIcon,
   CircleIcon,
+  CodeIcon,
   ClockIcon,
   CompassIcon,
   CopyIcon,
@@ -842,14 +923,20 @@ export {
   EyeIcon,
   FacebookIcon,
   FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
   GoogleIcon,
   HeartIcon,
+  HeadingIcon,
   IconColorProvider,
   InfoIcon,
+  ItalicIcon,
   ImageIcon,
   KeyboardIcon,
   LinkIcon,
+  ListIcon,
   ListChecksIcon,
+  ListOrderedIcon,
   LockIcon,
   MaximizeIcon,
   MenuIcon,
@@ -864,6 +951,7 @@ export {
   PlayIcon,
   PlusIcon,
   PlusSquareIcon,
+  QuoteIcon,
   ReceiptIcon,
   RepeatIcon,
   RotateCcwIcon,

package/src/utils/haptics.ts

@@ -61,3 +61,24 @@ export function hasHaptics(): boolean {
 export function selectionTick(): void {
   void getHaptics()?.selectionAsync().catch(() => {});
 }
+
+/**
+ * The knock for a thing coming loose or landing — a row lifted out of a list,
+ * a card dropped into place.
+ *
+ * An impact rather than a selection because it marks a change of state rather
+ * than a change of value: the finger is now holding something it was not
+ * holding a moment ago, and the lightest feedback is not enough to say so.
+ * `medium` is the one that reads as picking something up without reading as an
+ * error.
+ *
+ * Falls back to a selection tick where the style constants are missing, and to
+ * nothing at all where the package is.
+ */
+export function impactKnock(): void {
+  const haptics = getHaptics();
+  if (!haptics) return;
+  void haptics
+    .impactAsync(haptics.ImpactFeedbackStyle?.Medium)
+    .catch(() => {});
+}