@postal-music/icons 0.1.0

package/src/icons/files/DownloadIcon.native.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const DownloadIcon: React.FC<IconProps> = ({ size = 18, color = '#000000', strokeWidth = 1.5 }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M15.75 15.75H2.25M13.5 8.25L9 12.75M9 12.75L4.5 8.25M9 12.75V2.25"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { DownloadIcon };
+export default DownloadIcon;

package/src/icons/files/DownloadIcon.web.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const DownloadIcon: React.FC<IconProps> = ({ size = 18, color = "currentColor", strokeWidth = 1.5, className }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M15.75 15.75H2.25M13.5 8.25L9 12.75M9 12.75L4.5 8.25M9 12.75V2.25"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+    />
+  </svg>
+);
+
+export default DownloadIcon;

package/src/icons/files/File02Icon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface File02IconProps {
+  size?: number;
+}
+
+function File02Icon({ size = 18 }: File02IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M10.5 8.25H6M7.5 11.25H6M12 5.25H6M15 5.1V12.9C15 14.1601 15 14.7902 14.7548 15.2715C14.539 15.6948 14.1948 16.039 13.7715 16.2548C13.2902 16.5 12.6601 16.5 11.4 16.5H6.6C5.33988 16.5 4.70982 16.5 4.22852 16.2548C3.80516 16.039 3.46095 15.6948 3.24524 15.2715C3 14.7902 3 14.1601 3 12.9V5.1C3 3.83988 3 3.20982 3.24524 2.72852C3.46095 2.30516 3.80516 1.96095 4.22852 1.74524C4.70982 1.5 5.33988 1.5 6.6 1.5H11.4C12.6601 1.5 13.2902 1.5 13.7715 1.74524C14.1948 1.96095 14.539 2.30516 14.7548 2.72852C15 3.20982 15 3.83988 15 5.1Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { File02Icon };
+export default File02Icon;

package/src/icons/files/File02Icon.web.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface File02IconProps extends SVGProps<SVGSVGElement> {
+  /** Icon size in pixels */
+  size?: number;
+}
+
+function File02Icon({ size = 18, ...props }: File02IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10.5 8.25H6M7.5 11.25H6M12 5.25H6M15 5.1V12.9C15 14.1601 15 14.7902 14.7548 15.2715C14.539 15.6948 14.1948 16.039 13.7715 16.2548C13.2902 16.5 12.6601 16.5 11.4 16.5H6.6C5.33988 16.5 4.70982 16.5 4.22852 16.2548C3.80516 16.039 3.46095 15.6948 3.24524 15.2715C3 14.7902 3 14.1601 3 12.9V5.1C3 3.83988 3 3.20982 3.24524 2.72852C3.46095 2.30516 3.80516 1.96095 4.22852 1.74524C4.70982 1.5 5.33988 1.5 6.6 1.5H11.4C12.6601 1.5 13.2902 1.5 13.7715 1.74524C14.1948 1.96095 14.539 2.30516 14.7548 2.72852C15 3.20982 15 3.83988 15 5.1Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default File02Icon;

package/src/icons/files/FileDownload02Icon.native.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface FileDownload02IconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const FileDownload02Icon: React.FC<FileDownload02IconProps> = ({
+  size = 16,
+  strokeColor = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M13.3346 8.33301V4.53301C13.3346 3.4129 13.3346 2.85285 13.1166 2.42503C12.9249 2.0487 12.6189 1.74274 12.2426 1.55099C11.8148 1.33301 11.2547 1.33301 10.1346 1.33301H5.86797C4.74786 1.33301 4.18781 1.33301 3.75999 1.55099C3.38366 1.74274 3.0777 2.0487 2.88596 2.42503C2.66797 2.85285 2.66797 3.4129 2.66797 4.53301V11.4663C2.66797 12.5864 2.66797 13.1465 2.88596 13.5743C3.0777 13.9506 3.38366 14.2566 3.75999 14.4484C4.18781 14.6663 4.74783 14.6663 5.86787 14.6663H8.33464M9.33464 7.33301H5.33464M6.66797 9.99967H5.33464M10.668 4.66634H5.33464M10.0013 12.6663L12.0013 14.6663M12.0013 14.6663L14.0013 12.6663M12.0013 14.6663V10.6663"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FileDownload02Icon };
+export default FileDownload02Icon;

package/src/icons/files/FileDownload02Icon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface FileDownload02IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const FileDownload02Icon: React.FC<FileDownload02IconProps> = ({
+  size = 16,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.3346 8.33301V4.53301C13.3346 3.4129 13.3346 2.85285 13.1166 2.42503C12.9249 2.0487 12.6189 1.74274 12.2426 1.55099C11.8148 1.33301 11.2547 1.33301 10.1346 1.33301H5.86797C4.74786 1.33301 4.18781 1.33301 3.75999 1.55099C3.38366 1.74274 3.0777 2.0487 2.88596 2.42503C2.66797 2.85285 2.66797 3.4129 2.66797 4.53301V11.4663C2.66797 12.5864 2.66797 13.1465 2.88596 13.5743C3.0777 13.9506 3.38366 14.2566 3.75999 14.4484C4.18781 14.6663 4.74783 14.6663 5.86787 14.6663H8.33464M9.33464 7.33301H5.33464M6.66797 9.99967H5.33464M10.668 4.66634H5.33464M10.0013 12.6663L12.0013 14.6663M12.0013 14.6663L14.0013 12.6663M12.0013 14.6663V10.6663"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default FileDownload02Icon;

package/src/icons/files/FolderGradientIcon.native.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+
+interface FolderGradientIconProps {
+  size?: number;
+}
+
+const FolderGradientIcon = ({ size = 24 }: FolderGradientIconProps) => {
+  const gradientId = "folderGradient";
+
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z"
+        fill={`url(#${gradientId})`}
+      />
+      <Defs>
+        <LinearGradient
+          id={gradientId}
+          x1="12"
+          y1="3"
+          x2="12"
+          y2="21"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#7CC7FF" />
+          <Stop offset="0.5" stopColor="#63B4F5" stopOpacity="0.4" />
+          <Stop offset="1" stopColor="#4A94D6" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  );
+};
+
+FolderGradientIcon.displayName = "FolderGradientIcon";
+
+export { FolderGradientIcon };
+export default FolderGradientIcon;

package/src/icons/files/FolderGradientIcon.web.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+interface FolderGradientIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const FolderGradientIcon = React.forwardRef<
+  SVGSVGElement,
+  FolderGradientIconProps
+>(({ size = 24, ...props }, ref) => {
+  const gradientId = React.useId();
+
+  return (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M22 19C22 19.5304 21.7893 20.0391 21.4142 20.4142C21.0391 20.7893 20.5304 21 20 21H4C3.46957 21 2.96086 20.7893 2.58579 20.4142C2.21071 20.0391 2 19.5304 2 19V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3H9L11 6H20C20.5304 6 21.0391 6.21071 21.4142 6.58579C21.7893 6.96086 22 7.46957 22 8V19Z"
+        fill={`url(#${gradientId})`}
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="12"
+          y1="3"
+          x2="12"
+          y2="21"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7CC7FF" />
+          <stop offset="0.5" stopColor="#63B4F5" stopOpacity="0.4" />
+          <stop offset="1" stopColor="#4A94D6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+});
+
+FolderGradientIcon.displayName = "FolderGradientIcon";
+
+export default FolderGradientIcon;

package/src/icons/files/FolderIcon.native.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  fill?: string;
+}
+
+const FolderIcon: React.FC<IconProps> = ({ size = 20, color = '#000000', fill = "none" }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill={fill}
+  >
+    <Path
+      d="M10.8327 5.83333L9.90306 3.9741C9.63552 3.439 9.50174 3.17144 9.30216 2.97597C9.12567 2.80311 8.91295 2.67164 8.67941 2.59109C8.41532 2.5 8.11619 2.5 7.51793 2.5H4.33268C3.39926 2.5 2.93255 2.5 2.57603 2.68166C2.26243 2.84144 2.00746 3.09641 1.84767 3.41002C1.66602 3.76654 1.66602 4.23325 1.66602 5.16667V5.83333M1.66602 5.83333H14.3327C15.7328 5.83333 16.4329 5.83333 16.9677 6.10582C17.4381 6.3455 17.8205 6.72795 18.0602 7.19836C18.3327 7.73314 18.3327 8.4332 18.3327 9.83333V13.5C18.3327 14.9001 18.3327 15.6002 18.0602 16.135C17.8205 16.6054 17.4381 16.9878 16.9677 17.2275C16.4329 17.5 15.7328 17.5 14.3327 17.5H5.66602C4.26588 17.5 3.56582 17.5 3.03104 17.2275C2.56063 16.9878 2.17818 16.6054 1.9385 16.135C1.66602 15.6002 1.66602 14.9001 1.66602 13.5V5.83333Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FolderIcon };
+export default FolderIcon;

package/src/icons/files/FolderIcon.web.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  fill?: string;
+}
+
+const FolderIcon: React.FC<IconProps> = ({ size = 20, color = "currentColor", fill = "none" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.8327 5.83333L9.90306 3.9741C9.63552 3.439 9.50174 3.17144 9.30216 2.97597C9.12567 2.80311 8.91295 2.67164 8.67941 2.59109C8.41532 2.5 8.11619 2.5 7.51793 2.5H4.33268C3.39926 2.5 2.93255 2.5 2.57603 2.68166C2.26243 2.84144 2.00746 3.09641 1.84767 3.41002C1.66602 3.76654 1.66602 4.23325 1.66602 5.16667V5.83333M1.66602 5.83333H14.3327C15.7328 5.83333 16.4329 5.83333 16.9677 6.10582C17.4381 6.3455 17.8205 6.72795 18.0602 7.19836C18.3327 7.73314 18.3327 8.4332 18.3327 9.83333V13.5C18.3327 14.9001 18.3327 15.6002 18.0602 16.135C17.8205 16.6054 17.4381 16.9878 16.9677 17.2275C16.4329 17.5 15.7328 17.5 14.3327 17.5H5.66602C4.26588 17.5 3.56582 17.5 3.03104 17.2275C2.56063 16.9878 2.17818 16.6054 1.9385 16.135C1.66602 15.6002 1.66602 14.9001 1.66602 13.5V5.83333Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default FolderIcon;

package/src/icons/files/FolderPlusIcon.native.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type FolderPlusIconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+export const FolderPlusIcon = ({
+  size = 16,
+  strokeWidth = 1.5,
+}: FolderPlusIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M8.66671 4.66667L7.92301 3.17928C7.70898 2.7512 7.60195 2.53715 7.44229 2.38078C7.30109 2.24249 7.13092 2.13732 6.94409 2.07287C6.73282 2 6.49351 2 6.0149 2H3.46671C2.71997 2 2.3466 2 2.06139 2.14532C1.8105 2.27316 1.60653 2.47713 1.4787 2.72801C1.33337 3.01323 1.33337 3.3866 1.33337 4.13333V4.66667" />
+      <Path d="M1.33337 4.66667H11.4667C12.5868 4.66667 13.1469 4.66667 13.5747 4.88465C13.951 5.0764 14.257 5.38236 14.4487 5.75869C14.6667 6.18651 14.6667 6.74656 14.6667 7.86667V10.8C14.6667 11.9201 14.6667 12.4802 14.4487 12.908C14.257 13.2843 13.951 13.5903 13.5747 13.782C13.1469 14 12.5868 14 11.4667 14H4.53337C3.41327 14 2.85322 14 2.42539 13.782C2.04907 13.5903 1.74311 13.2843 1.55136 12.908C1.33337 12.4802 1.33337 11.9201 1.33337 10.8V4.66667" />
+      <Path d="M8.00004 11.3333V7.33333" />
+      <Path d="M6.00004 9.33333H10" />
+    </Svg>
+  );
+};
+
+FolderPlusIcon.displayName = "FolderPlusIcon";
+
+export default FolderPlusIcon;

package/src/icons/files/FolderPlusIcon.web.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type FolderPlusIconProps = {
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+  label?: string;
+  onClick?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<SVGSVGElement>) => void;
+  tabIndex?: number;
+  title?: string;
+} & Omit<React.SVGProps<SVGSVGElement>, "onClick" | "onKeyDown" | "color">;
+
+export const FolderPlusIcon = React.forwardRef<
+  SVGSVGElement,
+  FolderPlusIconProps
+>(
+  (
+    {
+      size = 16,
+      strokeWidth = 1.5,
+      className,
+      label,
+      onClick,
+      onKeyDown,
+      tabIndex,
+      title,
+      ...rest
+    },
+    ref,
+  ) => {
+    const handleKeyDown: React.KeyboardEventHandler<SVGSVGElement> = (e) => {
+      if (onKeyDown) {
+        onKeyDown(e);
+        return;
+      }
+      if (!onClick) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick(e as any);
+      }
+    };
+
+    const interactive = Boolean(onClick);
+    const ariaProps = label
+      ? { role: "img" as const, "aria-label": label }
+      : { "aria-hidden": true };
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          "inline-block align-middle",
+          interactive &&
+            "cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2",
+          className,
+        )}
+        tabIndex={interactive ? (tabIndex ?? 0) : tabIndex}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+        {...ariaProps}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path d="M8.66671 4.66667L7.92301 3.17928C7.70898 2.7512 7.60195 2.53715 7.44229 2.38078C7.30109 2.24249 7.13092 2.13732 6.94409 2.07287C6.73282 2 6.49351 2 6.0149 2H3.46671C2.71997 2 2.3466 2 2.06139 2.14532C1.8105 2.27316 1.60653 2.47713 1.4787 2.72801C1.33337 3.01323 1.33337 3.3866 1.33337 4.13333V4.66667" />
+        <path d="M1.33337 4.66667H11.4667C12.5868 4.66667 13.1469 4.66667 13.5747 4.88465C13.951 5.0764 14.257 5.38236 14.4487 5.75869C14.6667 6.18651 14.6667 6.74656 14.6667 7.86667V10.8C14.6667 11.9201 14.6667 12.4802 14.4487 12.908C14.257 13.2843 13.951 13.5903 13.5747 13.782C13.1469 14 12.5868 14 11.4667 14H4.53337C3.41327 14 2.85322 14 2.42539 13.782C2.04907 13.5903 1.74311 13.2843 1.55136 12.908C1.33337 12.4802 1.33337 11.9201 1.33337 10.8V4.66667" />
+        <path d="M8.00004 11.3333V7.33333" />
+        <path d="M6.00004 9.33333H10" />
+      </svg>
+    );
+  },
+);
+
+FolderPlusIcon.displayName = "FolderPlusIcon";
+
+// Usage:
+// <FolderPlusIcon className="text-foreground" size={20} label="New folder" onClick={() => {}} />

package/src/icons/files/Upload01Icon.native.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type Upload01IconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+export const Upload01Icon = ({
+  size = 16,
+  strokeWidth = 1.5,
+}: Upload01IconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M14 10v.8c0 1.12 0 1.68-.218 2.108a2.4 2.4 0 0 1-.874.874C12.48 14 11.92 14 10.8 14H5.2c-1.12 0-1.68 0-2.108-.218a2.4 2.4 0 0 1-.874-.874C2 12.48 2 11.92 2 10.8V10" />
+      <Path d="M11.333 5.333 8 2M8 2 4.667 5.333M8 2v8" />
+    </Svg>
+  );
+};
+
+Upload01Icon.displayName = "Upload01Icon";
+
+export default Upload01Icon;

package/src/icons/files/Upload01Icon.web.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type Upload01IconProps = {
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+  label?: string; // accessible name
+  onClick?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<SVGSVGElement>) => void;
+  tabIndex?: number;
+  title?: string;
+} & Omit<React.SVGProps<SVGSVGElement>, "onClick" | "onKeyDown">;
+
+export const Upload01Icon = React.forwardRef<SVGSVGElement, Upload01IconProps>(
+  (
+    {
+      size = 16,
+      strokeWidth = 1.5,
+      className,
+      label,
+      onClick,
+      onKeyDown,
+      tabIndex,
+      title,
+      ...rest
+    },
+    ref,
+  ) => {
+    const handleKeyDown: React.KeyboardEventHandler<SVGSVGElement> = (e) => {
+      if (onKeyDown) {
+        onKeyDown(e);
+        return;
+      }
+      if (!onClick) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick(e as any);
+      }
+    };
+
+    const interactive = Boolean(onClick);
+    const ariaProps = label
+      ? { role: "img" as const, "aria-label": label }
+      : { "aria-hidden": true };
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          "inline-block align-middle",
+          interactive &&
+            "cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2",
+          className,
+        )}
+        tabIndex={interactive ? (tabIndex ?? 0) : tabIndex}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+        {...ariaProps}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path d="M14 10v.8c0 1.12 0 1.68-.218 2.108a2.4 2.4 0 0 1-.874.874C12.48 14 11.92 14 10.8 14H5.2c-1.12 0-1.68 0-2.108-.218a2.4 2.4 0 0 1-.874-.874C2 12.48 2 11.92 2 10.8V10" />
+        <path d="M11.333 5.333 8 2M8 2 4.667 5.333M8 2v8" />
+      </svg>
+    );
+  },
+);
+
+Upload01Icon.displayName = "Upload01Icon";
+
+// Example usage:
+// <Upload01Icon className="text-foreground" size={20} label="Upload" onClick={() => {}} />

package/src/icons/files/UploadCloudIcon.native.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type IconProps = {
+  size?: number;
+};
+
+export function UploadCloudIcon({ size = 22 }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 22 22"
+      fill="none"
+    >
+      <Path
+        d="M7.33337 14.6667L11 11M11 11L14.6667 14.6667M11 11V19.25M18.3334 15.3476C19.4531 14.4229 20.1667 13.0239 20.1667 11.4583C20.1667 8.6739 17.9095 6.41667 15.125 6.41667C14.9247 6.41667 14.7373 6.31216 14.6357 6.13959C13.4403 4.1111 11.2333 2.75 8.70837 2.75C4.91142 2.75 1.83337 5.82804 1.83337 9.625C1.83337 11.5189 2.5992 13.234 3.83808 14.4774"
+        stroke="currentColor"
+        strokeWidth={1.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default UploadCloudIcon;

package/src/icons/files/UploadCloudIcon.web.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+export function UploadCloudIcon({ size = 22, className, ...props }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0", className)}
+      {...props}
+    >
+      <path
+        d="M7.33337 14.6667L11 11M11 11L14.6667 14.6667M11 11V19.25M18.3334 15.3476C19.4531 14.4229 20.1667 13.0239 20.1667 11.4583C20.1667 8.6739 17.9095 6.41667 15.125 6.41667C14.9247 6.41667 14.7373 6.31216 14.6357 6.13959C13.4403 4.1111 11.2333 2.75 8.70837 2.75C4.91142 2.75 1.83337 5.82804 1.83337 9.625C1.83337 11.5189 2.5992 13.234 3.83808 14.4774"
+        stroke="currentColor"
+        strokeWidth={1.75}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/files/UploadIcon.native.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface UploadIconProps {
+  size?: number;
+  strokeColor?: string;
+}
+
+export const UploadIcon: React.FC<UploadIconProps> = ({
+  size = 17,
+  strokeColor = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <Path
+      d="M14.875 10.625V11.475C14.875 12.6651 14.875 13.2602 14.6434 13.7147C14.4397 14.1146 14.1146 14.4397 13.7147 14.6434C13.2602 14.875 12.6651 14.875 11.475 14.875H5.525C4.33489 14.875 3.73983 14.875 3.28527 14.6434C2.88543 14.4397 2.56034 14.1146 2.35661 13.7147C2.125 13.2602 2.125 12.6651 2.125 11.475V10.625M12.0417 5.66667L8.5 2.125M8.5 2.125L4.95833 5.66667M8.5 2.125V10.625"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default UploadIcon;