@postal-music/icons 0.1.0

package/src/icons/alerts/XCircleIcon.web.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+type XCircleIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number;
+  title?: string;
+  strokeWidth?: number;
+};
+
+const XCircleIcon = React.forwardRef<SVGSVGElement, XCircleIconProps>(
+  (
+    {
+      size = 16,
+      className,
+      title = "X circle icon",
+      strokeWidth = 1.5,
+      ...rest
+    },
+    ref,
+  ) => {
+    if (size <= 0) return null;
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        role="img"
+        aria-label={title}
+        focusable={false}
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M10.0002 5.99967L6.00016 9.99967M6.00016 5.99967L10.0002 9.99967M14.6668 7.99967C14.6668 11.6816 11.6821 14.6663 8.00016 14.6663C4.31826 14.6663 1.3335 11.6816 1.3335 7.99967C1.3335 4.31778 4.31826 1.33301 8.00016 1.33301C11.6821 1.33301 14.6668 4.31778 14.6668 7.99967Z"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  },
+);
+
+XCircleIcon.displayName = "XCircleIcon";
+export default XCircleIcon;

package/src/icons/alerts/index.ts

@@ -0,0 +1,8 @@
+export { default as AlertTriangleIcon } from './AlertTriangleIcon';
+export { default as BellIcon } from './BellIcon';
+export { default as CheckCircleIcon } from './CheckCircleIcon';
+export { default as InfoCircleIcon } from './InfoCircleIcon';
+export { default as InfoIcon } from './InfoIcon';
+export { default as InfoSquareIcon } from './InfoSquareIcon';
+export { SlashCircleIcon } from './SlashCircleIcon';
+export { default as XCircleIcon } from './XCircleIcon';

package/src/icons/arrows/ArrowDownIcon.native.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type ArrowDownIconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+};
+
+export const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({
+  size = 20,
+  strokeWidth = 2,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <Path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      d="M19 9l-7 7-7-7"
+    />
+  </Svg>
+);
+
+export default ArrowDownIcon;

package/src/icons/arrows/ArrowDownIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+type ArrowDownIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string; // e.g. 18, "1.25rem"
+  strokeWidth?: number; // e.g. 1.5
+};
+
+export const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({
+  size = 20,
+  strokeWidth = 2,
+  className,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      d="M19 9l-7 7-7-7"
+    />
+  </svg>
+);

package/src/icons/arrows/ArrowLeftIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ArrowLeftIcon: React.FC<IconProps> = ({
+  size = 16,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M10 12L6 8L10 4"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { ArrowLeftIcon };
+export default ArrowLeftIcon;

package/src/icons/arrows/ArrowLeftIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ArrowLeftIcon: React.FC<IconProps> = ({
+  size = 16,
+  color = "currentColor",
+  strokeWidth = 1.5,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 12L6 8L10 4"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ArrowLeftIcon;

package/src/icons/arrows/ArrowRightIcon.native.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+}
+
+export const ArrowRightIcon = ({ size = 18 }: IconProps) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M6.75 13.5L11.25 9L6.75 4.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+ArrowRightIcon.displayName = "ArrowRightIcon";
+
+export default ArrowRightIcon;

package/src/icons/arrows/ArrowRightIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon size (both width & height) in pixels */
+  size?: number;
+}
+
+export const ArrowRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 18, className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M6.75 13.5L11.25 9L6.75 4.5"
+        stroke="currentColor"
+        strokeWidth={"currentStrokeWidth"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+ArrowRightIcon.displayName = "ArrowRightIcon";

package/src/icons/arrows/ArrowUp01Icon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type ArrowUpIconProps = {
+  size?: number;
+  strokeWidth?: number;
+};
+
+export const ArrowUpIcon01 = React.memo(({ size = 24, strokeWidth = 2 }: ArrowUpIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M12 19V5M12 5L5 12M12 5L19 12"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+});
+
+ArrowUpIcon01.displayName = "ArrowUpIcon01";
+
+export default ArrowUpIcon01;

package/src/icons/arrows/ArrowUp01Icon.web.tsx

@@ -0,0 +1,53 @@
+// components/icons/ArrowUpIcon.tsx
+import * as React from "react";
+
+type ArrowUpIconProps = {
+  size?: number;                 // px
+  strokeWidth?: number;          // SVG stroke width
+  className?: string;            // Tailwind-friendly class hook
+  title?: string;                // <title> for accessible name (tooltip in some UAs)
+  ariaLabel?: string;            // explicit accessible name
+} & React.SVGProps<SVGSVGElement>;
+
+export const ArrowUpIcon01 = React.memo(
+  React.forwardRef<SVGSVGElement, ArrowUpIconProps>((props, ref) => {
+    const {
+      size = 24,
+      strokeWidth = 2,
+      className,
+      title,
+      ariaLabel,
+      ...rest
+    } = props;
+
+    const labelled = Boolean(ariaLabel || title);
+    const ariaProps = labelled
+      ? { role: "img", "aria-label": ariaLabel }
+      : { "aria-hidden": true };
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        {...ariaProps}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M12 19V5M12 5L5 12M12 5L19 12"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  })
+);
+
+ArrowUpIcon01.displayName = "ArrowUpIcon01";

package/src/icons/arrows/ArrowUpIcon.native.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type ArrowUpIconProps = {
+  size?: number;
+  color?: string;
+  fill?: string;
+};
+
+export function ArrowUpIcon({
+  size = 16,
+  color = '#000000',
+  fill = "none",
+}: ArrowUpIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+    >
+      <Path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default ArrowUpIcon;

package/src/icons/arrows/ArrowUpIcon.web.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export function ArrowUpIcon({
+  className,
+  size = 16,
+  stroke = "#8F8F8F",
+  color = "currentColor",
+  fill = "none",
+  ...props
+}: React.SVGProps<SVGSVGElement> & { stroke?: string; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/arrows/ChevronLeftIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ChevronLeftIcon: React.FC<IconProps> = ({
+  size = 16,
+  color = '#000000',
+  strokeWidth = 1.25,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M12.6654 8.0013L3.33203 8.0013M3.33203 8.0013L7.9987 12.668M3.33203 8.0013L7.9987 3.33464"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { ChevronLeftIcon };
+export default ChevronLeftIcon;

package/src/icons/arrows/ChevronLeftIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ChevronLeftIcon: React.FC<IconProps> = ({
+  size = 16,
+  color = "currentColor",
+  strokeWidth = 1.25,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.6654 8.0013L3.33203 8.0013M3.33203 8.0013L7.9987 12.668M3.33203 8.0013L7.9987 3.33464"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ChevronLeftIcon;

package/src/icons/arrows/ChevronSelectorIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ChevronSelectorIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = '#000000',
+  strokeWidth = 2,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M5.83325 12.4999L9.99992 16.6666L14.1666 12.4999M5.83325 7.49992L9.99992 3.33325L14.1666 7.49992"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { ChevronSelectorIcon };
+export default ChevronSelectorIcon;

package/src/icons/arrows/ChevronSelectorIcon.web.tsx

@@ -0,0 +1,33 @@
+// components/icons/ChevronSelectorIcon.tsx
+"use client"
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const ChevronSelectorIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+}) => (
+    <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M5.83325 12.4999L9.99992 16.6666L14.1666 12.4999M5.83325 7.49992L9.99992 3.33325L14.1666 7.49992"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ChevronSelectorIcon;
+

package/src/icons/arrows/NarrowUpRightIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type IconProps = {
+  width?: number | string;
+  height?: number | string;
+};
+
+export function NarrowUpRightIcon({ width = 18, height = 18 }: IconProps) {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M4.5 13.5L13.5 4.5M13.5 4.5H7.5M13.5 4.5V10.5"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default NarrowUpRightIcon;

package/src/icons/arrows/NarrowUpRightIcon.web.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+};
+
+export function NarrowUpRightIcon({ title, ...props }: IconProps) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={title ? undefined : true}
+      role={title ? "img" : "presentation"}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M4.5 13.5L13.5 4.5M13.5 4.5H7.5M13.5 4.5V10.5"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/arrows/SwitchHorizontal02Icon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface SwitchHorizontal02IconProps {
+  size?: number;
+}
+
+const SwitchHorizontal02Icon: React.FC<SwitchHorizontal02IconProps> = ({
+  size = 18,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M3 12.75H15M15 12.75L12 9.75M15 12.75L12 15.75M15 5.25H3M3 5.25L6 2.25M3 5.25L6 8.25"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SwitchHorizontal02Icon };
+export default SwitchHorizontal02Icon;

package/src/icons/arrows/SwitchHorizontal02Icon.web.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface SwitchHorizontal02IconProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Size of the icon (width and height). Default is 18.
+   */
+  size?: number;
+}
+
+/**
+ * A reusable "Switch Horizontal 02" icon component.
+ *
+ * @param size - width and height of the SVG in pixels.
+ * @param props - additional SVG props such as className or style.
+ */
+const SwitchHorizontal02Icon: React.FC<SwitchHorizontal02IconProps> = ({
+  size = 18,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3 12.75H15M15 12.75L12 9.75M15 12.75L12 15.75M15 5.25H3M3 5.25L6 2.25M3 5.25L6 8.25"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SwitchHorizontal02Icon;

package/src/icons/arrows/UTurnIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface UTurnIconProps {
+  size?: number;
+  strokeWidth?: number;
+}
+
+export const UTurnIcon = ({ size = 17, strokeWidth }: UTurnIconProps) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <Path
+      d="M2.83203 4.95833H9.91536C12.2626 4.95833 14.1654 6.86112 14.1654 9.20833C14.1654 11.5555 12.2626 13.4583 9.91536 13.4583H2.83203M2.83203 4.95833L5.66536 2.125M2.83203 4.95833L5.66536 7.79167"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+UTurnIcon.displayName = "UTurnIcon";
+
+export default UTurnIcon;