@postal-music/icons 0.1.0

package/src/icons/users/UserXIcon.web.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+type UserXIconProps = {
+  size?: number | string;
+  className?: string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export default function UserXIcon({
+  size = 16,
+  className = "",
+  color = "currentColor",
+  strokeWidth = 1.25,
+  ...props
+}) {
+  return (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    stroke={color}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.0002 10.6667L14.3335 14M14.3335 10.6667L11.0002 14M8.00016 10.3333H5.00017C4.06979 10.3333 3.6046 10.3333 3.22607 10.4482C2.3738 10.7067 1.70686 11.3736 1.44832 12.2259C1.3335 12.6044 1.3335 13.0696 1.3335 14M9.66683 5C9.66683 6.65685 8.32368 8 6.66683 8C5.00998 8 3.66683 6.65685 3.66683 5C3.66683 3.34315 5.00998 2 6.66683 2C8.32368 2 9.66683 3.34315 9.66683 5Z"
+    />
+  </svg>
+)}
+
+// Usage example:
+// <UserXIcon size={24} color="#333" strokeWidth={2} className="my-2" />

package/src/icons/users/Users03Icon.native.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type Users03IconProps = {
+  size?: number | string;
+};
+
+export default function Users03Icon({
+  size = 16,
+}: Users03IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <Path
+        d="M11.9999 10.5579C12.9705 11.0455 13.8026 11.828 14.4101 12.8064C14.5303 13.0002 14.5905 13.0971 14.6113 13.2312C14.6535 13.5038 14.4671 13.839 14.2132 13.9469C14.0882 14 13.9477 14 13.6666 14M10.6666 7.68816C11.6544 7.19726 12.3332 6.17791 12.3332 5C12.3332 3.82209 11.6544 2.80274 10.6666 2.31184M9.33322 5C9.33322 6.65685 7.99008 8 6.33322 8C4.67637 8 3.33322 6.65685 3.33322 5C3.33322 3.34315 4.67637 2 6.33322 2C7.99008 2 9.33322 3.34315 9.33322 5ZM1.70604 12.6256C2.76892 11.0297 4.44614 10 6.33322 10C8.22031 10 9.89753 11.0297 10.9604 12.6256C11.1932 12.9752 11.3097 13.15 11.2963 13.3733C11.2858 13.5471 11.1719 13.76 11.0329 13.8651C10.8545 14 10.6091 14 10.1183 14H2.54813C2.05734 14 1.81194 14 1.63352 13.8651C1.49459 13.76 1.38062 13.5471 1.37018 13.3733C1.35678 13.15 1.4732 12.9752 1.70604 12.6256Z"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { Users03Icon };

package/src/icons/users/Users03Icon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type Users03IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function Users03Icon({
+  size = 16,
+  className,
+  ...props
+}: Users03IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M11.9999 10.5579C12.9705 11.0455 13.8026 11.828 14.4101 12.8064C14.5303 13.0002 14.5905 13.0971 14.6113 13.2312C14.6535 13.5038 14.4671 13.839 14.2132 13.9469C14.0882 14 13.9477 14 13.6666 14M10.6666 7.68816C11.6544 7.19726 12.3332 6.17791 12.3332 5C12.3332 3.82209 11.6544 2.80274 10.6666 2.31184M9.33322 5C9.33322 6.65685 7.99008 8 6.33322 8C4.67637 8 3.33322 6.65685 3.33322 5C3.33322 3.34315 4.67637 2 6.33322 2C7.99008 2 9.33322 3.34315 9.33322 5ZM1.70604 12.6256C2.76892 11.0297 4.44614 10 6.33322 10C8.22031 10 9.89753 11.0297 10.9604 12.6256C11.1932 12.9752 11.3097 13.15 11.2963 13.3733C11.2858 13.5471 11.1719 13.76 11.0329 13.8651C10.8545 14 10.6091 14 10.1183 14H2.54813C2.05734 14 1.81194 14 1.63352 13.8651C1.49459 13.76 1.38062 13.5471 1.37018 13.3733C1.35678 13.15 1.4732 12.9752 1.70604 12.6256Z"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/users/UsersIcon.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 UsersIcon: React.FC<IconProps> = ({ size = 20, color = '#000000', strokeWidth = 1.5 }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M18.3327 17.5V15.8333C18.3327 14.2801 17.2704 12.9751 15.8327 12.605M12.916 2.7423C14.1376 3.23679 14.9993 4.43443 14.9993 5.83333C14.9993 7.23224 14.1376 8.42988 12.916 8.92437M14.166 17.5C14.166 15.9469 14.166 15.1703 13.9123 14.5577C13.574 13.741 12.9251 13.092 12.1083 12.7537C11.4957 12.5 10.7192 12.5 9.16602 12.5H6.66602C5.11288 12.5 4.33631 12.5 3.72374 12.7537C2.90698 13.092 2.25806 13.741 1.91975 14.5577C1.66602 15.1703 1.66602 15.9469 1.66602 17.5M11.2493 5.83333C11.2493 7.67428 9.75697 9.16667 7.91602 9.16667C6.07507 9.16667 4.58268 7.67428 4.58268 5.83333C4.58268 3.99238 6.07507 2.5 7.91602 2.5C9.75697 2.5 11.2493 3.99238 11.2493 5.83333Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { UsersIcon };
+export default UsersIcon;

package/src/icons/users/UsersIcon.web.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const UsersIcon: React.FC<IconProps> = ({ size = 20, color = "currentColor", strokeWidth = 1.5 }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.3327 17.5V15.8333C18.3327 14.2801 17.2704 12.9751 15.8327 12.605M12.916 2.7423C14.1376 3.23679 14.9993 4.43443 14.9993 5.83333C14.9993 7.23224 14.1376 8.42988 12.916 8.92437M14.166 17.5C14.166 15.9469 14.166 15.1703 13.9123 14.5577C13.574 13.741 12.9251 13.092 12.1083 12.7537C11.4957 12.5 10.7192 12.5 9.16602 12.5H6.66602C5.11288 12.5 4.33631 12.5 3.72374 12.7537C2.90698 13.092 2.25806 13.741 1.91975 14.5577C1.66602 15.1703 1.66602 15.9469 1.66602 17.5M11.2493 5.83333C11.2493 7.67428 9.75697 9.16667 7.91602 9.16667C6.07507 9.16667 4.58268 7.67428 4.58268 5.83333C4.58268 3.99238 6.07507 2.5 7.91602 2.5C9.75697 2.5 11.2493 3.99238 11.2493 5.83333Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default UsersIcon;

package/src/icons/users/UsersPlusIcon.native.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+export const UsersPlusIcon = ({
+  size = 16,
+}: {
+  size?: number;
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <Path
+        d="M12.6654 14V10M10.6654 12H14.6654M7.9987 10H5.33203C4.08952 10 3.46826 10 2.97821 10.203C2.3248 10.4736 1.80567 10.9928 1.53502 11.6462C1.33203 12.1362 1.33203 12.7575 1.33203 14M10.332 2.19384C11.3093 2.58943 11.9987 3.54754 11.9987 4.66667C11.9987 5.78579 11.3093 6.7439 10.332 7.13949M8.9987 4.66667C8.9987 6.13943 7.80479 7.33333 6.33203 7.33333C4.85927 7.33333 3.66536 6.13943 3.66536 4.66667C3.66536 3.19391 4.85927 2 6.33203 2C7.80479 2 8.9987 3.19391 8.9987 4.66667Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export default UsersPlusIcon;

package/src/icons/users/UsersPlusIcon.web.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+
+export const UsersPlusIcon = ({
+  className,
+  size = 16,
+}: {
+  className?: string;
+  size?: number;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-label="Users plus icon"
+    >
+      <path
+        d="M12.6654 14V10M10.6654 12H14.6654M7.9987 10H5.33203C4.08952 10 3.46826 10 2.97821 10.203C2.3248 10.4736 1.80567 10.9928 1.53502 11.6462C1.33203 12.1362 1.33203 12.7575 1.33203 14M10.332 2.19384C11.3093 2.58943 11.9987 3.54754 11.9987 4.66667C11.9987 5.78579 11.3093 6.7439 10.332 7.13949M8.9987 4.66667C8.9987 6.13943 7.80479 7.33333 6.33203 7.33333C4.85927 7.33333 3.66536 6.13943 3.66536 4.66667C3.66536 3.19391 4.85927 2 6.33203 2C7.80479 2 8.9987 3.19391 8.9987 4.66667Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/icons/users/index.ts

@@ -0,0 +1,8 @@
+export { default as AccountIcon } from './AccountIcon';
+export { default as UserApproveIcon } from './UserApproveIcon';
+export { default as UserIcon } from './UserIcon';
+export { default as UserPlusIcon } from './UserPlusIcon';
+export { default as UserXIcon } from './UserXIcon';
+export { default as Users03Icon } from './Users03Icon';
+export { default as UsersIcon } from './UsersIcon';
+export { default as UsersPlusIcon } from './UsersPlusIcon';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './icons';
+export * from './tokens';

package/src/tokens/colors.ts

@@ -0,0 +1,55 @@
+/**
+ * Postal Design Tokens — Colors
+ *
+ * Primitive hex values shared across all platforms.
+ * Web apps map these to CSS custom properties via tailwind.config.ts.
+ * Native apps use these values directly in StyleSheet.
+ */
+
+export const colors = {
+  black: '#000000',
+  white: '#FFFFFF',
+
+  gray: {
+    50: '#F5F5F5',
+    100: '#EEEEEF',
+    200: '#D9D9D9',
+    300: '#B3B3B3',
+    400: '#A0A0A0',
+    500: '#7F7F7F',
+    600: '#666666',
+    700: '#333333',
+  },
+
+  blue: {
+    DEFAULT: '#007EFF',
+    500: '#3B82F6',
+  },
+
+  red: {
+    DEFAULT: '#FA233B',
+    light: '#FF5A5E',
+  },
+
+  green: {
+    DEFAULT: '#008000',
+    spotify: '#1DB954',
+  },
+
+  semantic: {
+    backgroundPrimary: '#FFFFFF',
+    backgroundSecondary: '#F5F5F5',
+    backgroundTertiary: '#EEEEEF',
+    backgroundPlaceholder: '#D9D9D9',
+    textPrimary: '#000000',
+    textSecondary: '#7F7F7F',
+    textTertiary: '#666666',
+    textMuted: '#A0A0A0',
+    textPlaceholder: '#DCDCDE',
+    textInverse: '#FFFFFF',
+    separator: '#EEEEEF',
+    overlay: 'rgba(0, 0, 0, 0.28)',
+  },
+} as const;
+
+export type Colors = typeof colors;

package/src/tokens/index.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+export * from './radius';

package/src/tokens/radius.ts

@@ -0,0 +1,16 @@
+/**
+ * Postal Design Tokens — Border Radius
+ */
+
+export const radius = {
+  none: 0,
+  xs: 5,
+  sm: 10,
+  md: 12,
+  lg: 15,
+  xl: 20,
+  xxl: 50,
+  pill: 1000,
+} as const;
+
+export type Radius = typeof radius;

package/src/tokens/spacing.ts

@@ -0,0 +1,27 @@
+/**
+ * Postal Design Tokens — Spacing
+ *
+ * Unitless values (logical pixels). Use directly in React Native StyleSheet
+ * or as px values in CSS/Tailwind.
+ */
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 20,
+  xl: 24,
+  xxl: 32,
+  '3xl': 40,
+  '4xl': 50,
+
+  // Named semantic aliases
+  screenPadding: 20,
+  sectionGap: 40,
+  listItemGap: 16,
+  gridColumnGap: 15,
+  gridRowGap: 18,
+  gridGap: 16,
+} as const;
+
+export type Spacing = typeof spacing;

package/src/tokens/typography.ts

@@ -0,0 +1,42 @@
+/**
+ * Postal Design Tokens — Typography
+ *
+ * Unitless values. Apply as px in CSS/Tailwind or directly in React Native TextStyle.
+ */
+
+export const fontSizes = {
+  caption: 11,
+  xs: 12,
+  sm: 13,
+  base: 14,
+  md: 15,
+  body: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 22,
+  '3xl': 24,
+  '4xl': 37,
+} as const;
+
+export const fontWeights = {
+  regular: '400',
+  medium: '500',
+  semiBold: '600',
+  bold: '700',
+} as const;
+
+export const lineHeights = {
+  tight: 1.1,
+  snug: 1.25,
+  normal: 1.35,
+  relaxed: 1.5,
+} as const;
+
+export const letterSpacings = {
+  tightest: -0.72,
+  tighter: -0.48,
+  tight: -0.37,
+  none: 0,
+  wide: 0.22,
+  wider: 0.32,
+} as const;

package/src/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}