@dipesh.singh/proton 0.1.0

package/dist/tokens/typography.d.ts

@@ -0,0 +1,54 @@
+export declare const 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;
+    };
+};
+export type Typography = typeof typography;

package/dist/vue/components/ProtonButton.d.ts

@@ -0,0 +1,48 @@
+export interface VueProtonButtonProps {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    isLoading?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    className?: string;
+}
+/**
+ * Vue 3 Component definition for ProtonButton.
+ * Emits click events and applies the unified Proton Design Token styling.
+ */
+export declare const ProtonButton: {
+    name: string;
+    props: {
+        variant: {
+            type: StringConstructor;
+            default: string;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        isLoading: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+        };
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    emits: string[];
+    setup(props: VueProtonButtonProps, { slots, emit }: any): {
+        getStyle: () => Record<string, string>;
+        handleClick: (e: Event) => void;
+        slots: any;
+    };
+};
+export default ProtonButton;

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

@@ -0,0 +1,27 @@
+export interface VueProtonCardProps {
+    variant?: 'elevated' | 'outlined' | 'flat';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverEffect?: boolean;
+}
+export declare const ProtonCard: {
+    name: string;
+    props: {
+        variant: {
+            type: StringConstructor;
+            default: string;
+        };
+        padding: {
+            type: StringConstructor;
+            default: string;
+        };
+        hoverEffect: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    setup(props: VueProtonCardProps, { slots }: any): {
+        getStyle: () => Record<string, string>;
+        slots: any;
+    };
+};
+export default ProtonCard;

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

@@ -0,0 +1,47 @@
+export interface VueProtonStatusBadgeProps {
+    label: string;
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'coffee';
+    pulse?: boolean;
+}
+export declare const ProtonStatusBadge: {
+    name: string;
+    props: {
+        label: {
+            type: StringConstructor;
+            required: boolean;
+        };
+        status: {
+            type: StringConstructor;
+            default: string;
+        };
+        pulse: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+    setup(props: VueProtonStatusBadgeProps): {
+        getStyle: () => {
+            pill: {
+                display: string;
+                alignItems: string;
+                gap: string;
+                padding: string;
+                borderRadius: "9999px";
+                backgroundColor: string;
+                color: string;
+                border: string;
+                fontSize: string;
+                fontWeight: string;
+            };
+            dot: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                backgroundColor: string;
+                display: string;
+            };
+        };
+        props: VueProtonStatusBadgeProps;
+    };
+};
+export default ProtonStatusBadge;

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

@@ -0,0 +1,3 @@
+export * from './ProtonButton';
+export * from './ProtonCard';
+export * from './ProtonStatusBadge';

package/dist/vue/index.d.ts

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

package/dist/vue/index.js

@@ -0,0 +1,115 @@
+import { radii as l, colors as e, shadows as i } from "../tokens/index.js";
+import { spacing as p, default as x, typography as m } from "../tokens/index.js";
+const f = {
+  name: "ProtonButton",
+  props: {
+    variant: { type: String, default: "primary" },
+    size: { type: String, default: "md" },
+    isLoading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    type: { type: String, default: "button" },
+    className: { type: String, default: "" }
+  },
+  emits: ["click"],
+  setup(a, { slots: n, emit: s }) {
+    return {
+      getStyle: () => {
+        const t = {
+          borderRadius: l.xl,
+          fontWeight: "700",
+          letterSpacing: "-0.01em",
+          cursor: a.disabled || a.isLoading ? "not-allowed" : "pointer",
+          opacity: a.disabled ? "0.6" : "1",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          border: "none",
+          transition: "all 0.2s ease-in-out"
+        };
+        switch (a.size === "sm" ? (t.fontSize = "0.75rem", t.padding = "6px 12px") : a.size === "lg" ? (t.fontSize = "0.95rem", t.padding = "12px 24px") : (t.fontSize = "0.85rem", t.padding = "9px 18px"), a.variant) {
+          case "secondary":
+            t.backgroundColor = e.coffee[900], t.color = "#ffffff";
+            break;
+          case "outline":
+            t.backgroundColor = "transparent", t.color = e.slate[800], t.border = `1px solid ${e.slate[300]}`;
+            break;
+          case "ghost":
+            t.backgroundColor = "transparent", t.color = e.slate[700];
+            break;
+          case "danger":
+            t.backgroundColor = e.status.error.main, t.color = "#ffffff";
+            break;
+          default:
+            t.backgroundColor = e.amber[700], t.color = "#ffffff";
+            break;
+        }
+        return t;
+      },
+      handleClick: (t) => {
+        !a.disabled && !a.isLoading && s("click", t);
+      },
+      slots: n
+    };
+  }
+}, u = {
+  name: "ProtonCard",
+  props: {
+    variant: { type: String, default: "outlined" },
+    padding: { type: String, default: "md" },
+    hoverEffect: { type: Boolean, default: !1 }
+  },
+  setup(a, { slots: n }) {
+    return { getStyle: () => {
+      const r = {
+        borderRadius: l["2xl"],
+        transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+      };
+      return a.padding === "none" ? r.padding = "0px" : a.padding === "sm" ? r.padding = "12px" : a.padding === "lg" ? r.padding = "28px" : r.padding = "20px", a.variant === "elevated" ? (r.backgroundColor = "#ffffff", r.boxShadow = i.md) : a.variant === "flat" ? (r.backgroundColor = e.slate[50], r.border = `1px solid ${e.slate[100]}`) : (r.backgroundColor = "#ffffff", r.border = `1px solid ${e.slate[200]}`, r.boxShadow = i.xs), r;
+    }, slots: n };
+  }
+}, g = {
+  name: "ProtonStatusBadge",
+  props: {
+    label: { type: String, required: !0 },
+    status: { type: String, default: "neutral" },
+    pulse: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    return { getStyle: () => {
+      let s = e.slate[100], r = e.slate[700], t = e.slate[200], o = e.slate[500];
+      return a.status === "success" ? (s = e.status.success.light, r = e.status.success.text, t = e.status.success.border, o = e.status.success.main) : a.status === "warning" ? (s = e.status.warning.light, r = e.status.warning.text, t = e.status.warning.border, o = e.status.warning.main) : a.status === "error" ? (s = e.status.error.light, r = e.status.error.text, t = e.status.error.border, o = e.status.error.main) : a.status === "coffee" && (s = e.amber[50], r = e.amber[800], t = e.amber[200], o = e.amber[600]), {
+        pill: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "4px 10px",
+          borderRadius: l.full,
+          backgroundColor: s,
+          color: r,
+          border: `1px solid ${t}`,
+          fontSize: "0.75rem",
+          fontWeight: "700"
+        },
+        dot: {
+          width: "6px",
+          height: "6px",
+          borderRadius: "50%",
+          backgroundColor: o,
+          display: "inline-block"
+        }
+      };
+    }, props: a };
+  }
+};
+export {
+  f as ProtonButton,
+  u as ProtonCard,
+  g as ProtonStatusBadge,
+  e as colors,
+  l as radii,
+  i as shadows,
+  p as spacing,
+  x as tokens,
+  m as typography
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@dipesh.singh/proton",
+  "version": "0.1.0",
+  "description": "Unified Design System & Framework-Agnostic Abstraction Layer for Hiljhil Cafe",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dipeshsingh2012/proton.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-system",
+    "material-ui",
+    "tokens",
+    "react",
+    "vue",
+    "hiljhil-cafe"
+  ],
+  "type": "module",
+  "main": "./dist/react/index.js",
+  "module": "./dist/react/index.js",
+  "types": "./dist/react/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json && vite build",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}