@dipesh.singh/proton 0.1.0

package/dist/react/components/ProtonCard.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface ProtonCardProps {
+    children: React.ReactNode;
+    variant?: 'elevated' | 'outlined' | 'flat';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverEffect?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const ProtonCard: React.FC<ProtonCardProps> & {
+    Header: React.FC<{
+        title: React.ReactNode;
+        subtitle?: React.ReactNode;
+        action?: React.ReactNode;
+    }>;
+    Body: React.FC<{
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    Footer: React.FC<{
+        children: React.ReactNode;
+        className?: string;
+    }>;
+};
+export default ProtonCard;

package/dist/react/components/ProtonDialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ProtonDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+export declare const ProtonDialog: React.FC<ProtonDialogProps>;
+export default ProtonDialog;

package/dist/react/components/ProtonInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ProtonInputProps {
+    label?: string;
+    value?: string | number;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    type?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    className?: string;
+}
+export declare const ProtonInput: React.FC<ProtonInputProps>;
+export default ProtonInput;

package/dist/react/components/ProtonMetricBox.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface DimensionMetric {
+    label: string;
+    value: number | string;
+    unit?: string;
+}
+export interface ProtonMetricBoxProps {
+    title?: string;
+    badgeText?: string;
+    metrics: DimensionMetric[];
+    highlightNotice?: string;
+    className?: string;
+}
+export declare const ProtonMetricBox: React.FC<ProtonMetricBoxProps>;
+export default ProtonMetricBox;

package/dist/react/components/ProtonSlider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ProtonSliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    label?: string;
+    className?: string;
+}
+export declare const ProtonSlider: React.FC<ProtonSliderProps>;
+export default ProtonSlider;

package/dist/react/components/ProtonStatusBadge.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type StatusVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'coffee';
+export interface ProtonStatusBadgeProps {
+    label: React.ReactNode;
+    status?: StatusVariant;
+    pulse?: boolean;
+    icon?: React.ReactNode;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare const ProtonStatusBadge: React.FC<ProtonStatusBadgeProps>;
+export default ProtonStatusBadge;

package/dist/react/components/ProtonTypography.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ProtonHeadingProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ProtonHeading: React.FC<ProtonHeadingProps>;
+export interface ProtonTextProps {
+    children: React.ReactNode;
+    variant?: 'body' | 'caption' | 'muted';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ProtonText: React.FC<ProtonTextProps>;

package/dist/react/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ProtonButton';
+export * from './ProtonCard';
+export * from './ProtonStatusBadge';
+export * from './ProtonInput';
+export * from './ProtonSlider';
+export * from './ProtonDialog';
+export * from './ProtonMetricBox';
+export * from './ProtonTypography';

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../tokens';
+export * from './theme';
+export * from './components';

package/dist/react/index.js

@@ -0,0 +1,22 @@
+import { colors as a, radii as r, shadows as s, spacing as n, default as e, typography as P } from "../tokens/index.js";
+import { P as p, a as d, b as g, c as h, d as m, e as u, f as c, g as f, h as l, i as x, p as T, j as B } from "../ProtonTypography-Cp9sfQ06.js";
+export {
+  p as ProtonButton,
+  d as ProtonCard,
+  g as ProtonDialog,
+  h as ProtonHeading,
+  m as ProtonInput,
+  u as ProtonMetricBox,
+  c as ProtonSlider,
+  f as ProtonStatusBadge,
+  l as ProtonText,
+  x as ProtonThemeProvider,
+  a as colors,
+  T as protonMuiTheme,
+  B as protonThemeOptions,
+  r as radii,
+  s as shadows,
+  n as spacing,
+  e as tokens,
+  P as typography
+};

package/dist/react/theme/ProtonThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { protonMuiTheme } from './muiTheme';
+export interface ProtonThemeProviderProps {
+    children: React.ReactNode;
+    theme?: typeof protonMuiTheme;
+}
+/**
+ * Wraps your application or fragment in the Proton Design System theme.
+ * Can be swapped to another provider (e.g. Radix or custom) without modifying fragment code.
+ */
+export declare const ProtonThemeProvider: React.FC<ProtonThemeProviderProps>;
+export default ProtonThemeProvider;

package/dist/react/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './muiTheme';
+export * from './ProtonThemeProvider';

package/dist/react/theme/muiTheme.d.ts

@@ -0,0 +1,4 @@
+import { ThemeOptions } from '@mui/material';
+export declare const protonThemeOptions: ThemeOptions;
+export declare const protonMuiTheme: import("@mui/material").Theme;
+export default protonMuiTheme;

package/dist/tokens/colors.d.ts

@@ -0,0 +1,79 @@
+export declare const colors: {
+    readonly coffee: {
+        readonly 50: "#f7f4f2";
+        readonly 100: "#ede6e1";
+        readonly 200: "#daccc3";
+        readonly 300: "#c1aba0";
+        readonly 400: "#a38475";
+        readonly 500: "#89695a";
+        readonly 600: "#6f5244";
+        readonly 700: "#583f34";
+        readonly 800: "#422f27";
+        readonly 900: "#2c1e19";
+        readonly 950: "#1a110e";
+    };
+    readonly amber: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly cream: {
+        readonly 50: "#fdfbf7";
+        readonly 100: "#faf6ee";
+        readonly 200: "#f4ede0";
+        readonly 300: "#ece1ce";
+        readonly 400: "#dfcfb6";
+    };
+    readonly slate: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly status: {
+        readonly success: {
+            readonly light: "#ecfdf5";
+            readonly main: "#10b981";
+            readonly dark: "#047857";
+            readonly text: "#065f46";
+            readonly border: "#a7f3d0";
+        };
+        readonly warning: {
+            readonly light: "#fffbeb";
+            readonly main: "#f59e0b";
+            readonly dark: "#b45309";
+            readonly text: "#92400e";
+            readonly border: "#fde68a";
+        };
+        readonly error: {
+            readonly light: "#fef2f2";
+            readonly main: "#ef4444";
+            readonly dark: "#b91c1c";
+            readonly text: "#991b1b";
+            readonly border: "#fecaca";
+        };
+        readonly info: {
+            readonly light: "#eff6ff";
+            readonly main: "#3b82f6";
+            readonly dark: "#1d4ed8";
+            readonly text: "#1e40af";
+            readonly border: "#bfdbfe";
+        };
+    };
+};
+export type Colors = typeof colors;

package/dist/tokens/index.d.ts

@@ -0,0 +1,179 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';
+export * from './radii';
+export * from './shadows';
+export declare const tokens: {
+    readonly colors: {
+        readonly coffee: {
+            readonly 50: "#f7f4f2";
+            readonly 100: "#ede6e1";
+            readonly 200: "#daccc3";
+            readonly 300: "#c1aba0";
+            readonly 400: "#a38475";
+            readonly 500: "#89695a";
+            readonly 600: "#6f5244";
+            readonly 700: "#583f34";
+            readonly 800: "#422f27";
+            readonly 900: "#2c1e19";
+            readonly 950: "#1a110e";
+        };
+        readonly amber: {
+            readonly 50: "#fffbeb";
+            readonly 100: "#fef3c7";
+            readonly 200: "#fde68a";
+            readonly 300: "#fcd34d";
+            readonly 400: "#fbbf24";
+            readonly 500: "#f59e0b";
+            readonly 600: "#d97706";
+            readonly 700: "#b45309";
+            readonly 800: "#92400e";
+            readonly 900: "#78350f";
+            readonly 950: "#451a03";
+        };
+        readonly cream: {
+            readonly 50: "#fdfbf7";
+            readonly 100: "#faf6ee";
+            readonly 200: "#f4ede0";
+            readonly 300: "#ece1ce";
+            readonly 400: "#dfcfb6";
+        };
+        readonly slate: {
+            readonly 50: "#f8fafc";
+            readonly 100: "#f1f5f9";
+            readonly 200: "#e2e8f0";
+            readonly 300: "#cbd5e1";
+            readonly 400: "#94a3b8";
+            readonly 500: "#64748b";
+            readonly 600: "#475569";
+            readonly 700: "#334155";
+            readonly 800: "#1e293b";
+            readonly 900: "#0f172a";
+            readonly 950: "#020617";
+        };
+        readonly status: {
+            readonly success: {
+                readonly light: "#ecfdf5";
+                readonly main: "#10b981";
+                readonly dark: "#047857";
+                readonly text: "#065f46";
+                readonly border: "#a7f3d0";
+            };
+            readonly warning: {
+                readonly light: "#fffbeb";
+                readonly main: "#f59e0b";
+                readonly dark: "#b45309";
+                readonly text: "#92400e";
+                readonly border: "#fde68a";
+            };
+            readonly error: {
+                readonly light: "#fef2f2";
+                readonly main: "#ef4444";
+                readonly dark: "#b91c1c";
+                readonly text: "#991b1b";
+                readonly border: "#fecaca";
+            };
+            readonly info: {
+                readonly light: "#eff6ff";
+                readonly main: "#3b82f6";
+                readonly dark: "#1d4ed8";
+                readonly text: "#1e40af";
+                readonly border: "#bfdbfe";
+            };
+        };
+    };
+    readonly typography: {
+        readonly fonts: {
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+            readonly display: "\"Playfair Display\", Georgia, Cambria, \"Times New Roman\", Times, serif";
+            readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace";
+        };
+        readonly sizes: {
+            readonly xs: {
+                readonly fontSize: "0.75rem";
+                readonly lineHeight: "1rem";
+            };
+            readonly sm: {
+                readonly fontSize: "0.875rem";
+                readonly lineHeight: "1.25rem";
+            };
+            readonly base: {
+                readonly fontSize: "1rem";
+                readonly lineHeight: "1.5rem";
+            };
+            readonly lg: {
+                readonly fontSize: "1.125rem";
+                readonly lineHeight: "1.75rem";
+            };
+            readonly xl: {
+                readonly fontSize: "1.25rem";
+                readonly lineHeight: "1.75rem";
+            };
+            readonly '2xl': {
+                readonly fontSize: "1.5rem";
+                readonly lineHeight: "2rem";
+            };
+            readonly '3xl': {
+                readonly fontSize: "1.875rem";
+                readonly lineHeight: "2.25rem";
+            };
+            readonly '4xl': {
+                readonly fontSize: "2.25rem";
+                readonly lineHeight: "2.5rem";
+            };
+            readonly '5xl': {
+                readonly fontSize: "3rem";
+                readonly lineHeight: "1";
+            };
+        };
+        readonly weights: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+            readonly extrabold: 800;
+            readonly black: 900;
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0px";
+        readonly 1: "4px";
+        readonly 1.5: "6px";
+        readonly 2: "8px";
+        readonly 2.5: "10px";
+        readonly 3: "12px";
+        readonly 3.5: "14px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 9: "36px";
+        readonly 10: "40px";
+        readonly 12: "48px";
+        readonly 14: "56px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+    };
+    readonly radii: {
+        readonly none: "0px";
+        readonly sm: "6px";
+        readonly md: "10px";
+        readonly lg: "14px";
+        readonly xl: "18px";
+        readonly '2xl': "24px";
+        readonly '3xl': "32px";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
+        readonly warmGlow: "0 4px 20px -2px rgba(217, 119, 6, 0.2)";
+    };
+};
+export type DesignTokens = typeof tokens;
+export default tokens;

package/dist/tokens/index.js

@@ -0,0 +1,168 @@
+const e = {
+  // Hiljhil Brand Espresso Tones
+  coffee: {
+    50: "#f7f4f2",
+    100: "#ede6e1",
+    200: "#daccc3",
+    300: "#c1aba0",
+    400: "#a38475",
+    500: "#89695a",
+    600: "#6f5244",
+    700: "#583f34",
+    800: "#422f27",
+    900: "#2c1e19",
+    950: "#1a110e"
+  },
+  // Warm Amber & Golden Crema Accents
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  // Cream & Milk Foam Neutral Surfaces
+  cream: {
+    50: "#fdfbf7",
+    100: "#faf6ee",
+    200: "#f4ede0",
+    300: "#ece1ce",
+    400: "#dfcfb6"
+  },
+  // Modern Neutral Slate (Structure & Borders)
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  // Semantic Status Tones
+  status: {
+    success: {
+      light: "#ecfdf5",
+      main: "#10b981",
+      dark: "#047857",
+      text: "#065f46",
+      border: "#a7f3d0"
+    },
+    warning: {
+      light: "#fffbeb",
+      main: "#f59e0b",
+      dark: "#b45309",
+      text: "#92400e",
+      border: "#fde68a"
+    },
+    error: {
+      light: "#fef2f2",
+      main: "#ef4444",
+      dark: "#b91c1c",
+      text: "#991b1b",
+      border: "#fecaca"
+    },
+    info: {
+      light: "#eff6ff",
+      main: "#3b82f6",
+      dark: "#1d4ed8",
+      text: "#1e40af",
+      border: "#bfdbfe"
+    }
+  }
+}, f = {
+  fonts: {
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    display: '"Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace'
+  },
+  sizes: {
+    xs: { fontSize: "0.75rem", lineHeight: "1rem" },
+    // 12px
+    sm: { fontSize: "0.875rem", lineHeight: "1.25rem" },
+    // 14px
+    base: { fontSize: "1rem", lineHeight: "1.5rem" },
+    // 16px
+    lg: { fontSize: "1.125rem", lineHeight: "1.75rem" },
+    // 18px
+    xl: { fontSize: "1.25rem", lineHeight: "1.75rem" },
+    // 20px
+    "2xl": { fontSize: "1.5rem", lineHeight: "2rem" },
+    // 24px
+    "3xl": { fontSize: "1.875rem", lineHeight: "2.25rem" },
+    // 30px
+    "4xl": { fontSize: "2.25rem", lineHeight: "2.5rem" },
+    // 36px
+    "5xl": { fontSize: "3rem", lineHeight: "1" }
+    // 48px
+  },
+  weights: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  }
+}, a = {
+  0: "0px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  3.5: "14px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  12: "48px",
+  14: "56px",
+  16: "64px",
+  20: "80px"
+}, x = {
+  none: "0px",
+  sm: "6px",
+  md: "10px",
+  lg: "14px",
+  xl: "18px",
+  "2xl": "24px",
+  "3xl": "32px",
+  full: "9999px"
+}, p = {
+  none: "none",
+  xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  warmGlow: "0 4px 20px -2px rgba(217, 119, 6, 0.2)"
+}, r = {
+  colors: e,
+  typography: f,
+  spacing: a,
+  radii: x,
+  shadows: p
+};
+export {
+  e as colors,
+  r as default,
+  x as radii,
+  p as shadows,
+  a as spacing,
+  r as tokens,
+  f as typography
+};

package/dist/tokens/radii.d.ts

@@ -0,0 +1,11 @@
+export declare const radii: {
+    readonly none: "0px";
+    readonly sm: "6px";
+    readonly md: "10px";
+    readonly lg: "14px";
+    readonly xl: "18px";
+    readonly '2xl': "24px";
+    readonly '3xl': "32px";
+    readonly full: "9999px";
+};
+export type Radii = typeof radii;

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,10 @@
+export declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)";
+    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
+    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+    readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
+    readonly warmGlow: "0 4px 20px -2px rgba(217, 119, 6, 0.2)";
+};
+export type Shadows = typeof shadows;

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,21 @@
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 3.5: "14px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+};
+export type Spacing = typeof spacing;