panelui-native 0.16.0 → 0.19.0

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,147 @@ export function PauseIcon({ size = 16, color, ...props }: IconProps) {
     </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,
@@ -255,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,
@@ -331,26 +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,