ui-prokit 1.0.0

package/README.md

@@ -0,0 +1,96 @@
+# UI ProKit
+
+A modern, reusable UI component library built with React, TypeScript, and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install ui-prokit
+```
+
+## Usage
+
+### Import Styles
+
+First, import the styles in your app entry point (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import 'ui-prokit/styles.css';
+```
+
+### Using Components
+
+```tsx
+import { Card, Button } from 'ui-prokit';
+
+function App() {
+  return (
+    <Card padding="lg">
+      <h2>Welcome to UI ProKit</h2>
+      <Button variant="primary" size="lg">
+        Get Started
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Card
+
+A container component for displaying content in an elevated surface.
+
+**Props:**
+- `padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'` - Padding size (default: 'md')
+- `hoverable?: boolean` - Show hover effect (default: true)
+- `onClick?: () => void` - Click handler
+- `className?: string` - Additional CSS classes
+
+**Example:**
+```tsx
+<Card padding="lg" onClick={() => console.log('clicked')}>
+  <h3>Card Title</h3>
+  <p>Card content</p>
+</Card>
+```
+
+### Button
+
+A button component with multiple variants and sizes.
+
+**Props:**
+- `variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost'` - Visual style (default: 'primary')
+- `size?: 'sm' | 'md' | 'lg'` - Button size (default: 'md')
+- `loading?: boolean` - Show loading spinner (default: false)
+- `leftIcon?: ReactNode` - Icon before text
+- `rightIcon?: ReactNode` - Icon after text
+- `fullWidth?: boolean` - Take full width (default: false)
+
+**Example:**
+```tsx
+<Button variant="primary" size="lg" loading={isLoading}>
+  Submit
+</Button>
+
+<Button variant="secondary" leftIcon={<IconComponent />}>
+  With Icon
+</Button>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## License
+
+MIT

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual style variant of the button
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon to display before the button text
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display after the button text
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Makes the button take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Button content - can be omitted for icon-only buttons
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="lg">
+ *   Click Me
+ * </Button>
+ *
+ * <Button variant="secondary" leftIcon={<Icon />}>
+ *   With Icon
+ * </Button>
+ *
+ * <Button variant="ghost" leftIcon={<TrashIcon />} />
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface CardProps {
+    /**
+     * Content to be rendered inside the card
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes to apply to the card
+     */
+    className?: string;
+    /**
+     * Padding size for the card content
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Click handler for the card
+     */
+    onClick?: () => void;
+    /**
+     * Whether to show hover effect
+     * @default true
+     */
+    hoverable?: boolean;
+}
+/**
+ * Card component for displaying content in a contained, elevated surface
+ *
+ * @example
+ * ```tsx
+ * <Card padding="lg">
+ *   <h2>Card Title</h2>
+ *   <p>Card content goes here</p>
+ * </Card>
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),D="_card_hc8eo_2",E="_clickable_hc8eo_13",A="_paddingNone_hc8eo_18",N="_paddingSm_hc8eo_22",M="_paddingMd_hc8eo_26",$="_paddingLg_hc8eo_30",w="_paddingXl_hc8eo_34",a={card:D,clickable:E,paddingNone:A,paddingSm:N,paddingMd:M,paddingLg:$,paddingXl:w},k={none:a.paddingNone,sm:a.paddingSm,md:a.paddingMd,lg:a.paddingLg,xl:a.paddingXl},u=m.forwardRef(({children:t,className:r="",padding:i="md",onClick:n,hoverable:c=!0},o)=>{const d=c&&n?a.clickable:"",l=k[i];return e.jsx("div",{ref:o,className:`${a.card} ${l} ${d} ${r}`,onClick:n,children:t})});u.displayName="Card";const L="_button_fmuu7_2",j="_sizeSm_fmuu7_20",W="_sizeMd_fmuu7_27",R="_sizeLg_fmuu7_34",P="_variantPrimary_fmuu7_42",G="_variantSecondary_fmuu7_55",X="_variantDanger_fmuu7_68",T="_variantSuccess_fmuu7_77",q="_variantGhost_fmuu7_86",H="_fullWidth_fmuu7_100",O="_spinner_fmuu7_105",s={button:L,sizeSm:j,sizeMd:W,sizeLg:R,variantPrimary:P,variantSecondary:G,variantDanger:X,variantSuccess:T,variantGhost:q,fullWidth:H,spinner:O},V={primary:s.variantPrimary,secondary:s.variantSecondary,danger:s.variantDanger,success:s.variantSuccess,ghost:s.variantGhost},I={sm:s.sizeSm,md:s.sizeMd,lg:s.sizeLg},_=m.forwardRef(({children:t,variant:r="primary",size:i="md",loading:n=!1,leftIcon:c,rightIcon:o,fullWidth:d=!1,className:l="",disabled:F,...y},C)=>{const b=s.button,S=V[r],x=I[i],z=d?s.fullWidth:"",B=F||n;return e.jsxs("button",{ref:C,className:`${b} ${S} ${x} ${z} ${l}`,disabled:B,...y,children:[n&&e.jsxs("svg",{className:s.spinner,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),!n&&c,t,!n&&o]})});_.displayName="Button";const g={primary:{50:"#EEF2F9",100:"#D6E2F0",200:"#B0C7E3",300:"#89ACD5",400:"#6691C8",500:"#4A6FA5",600:"#3C5A87",700:"#2F4568",800:"#21304A",900:"#131B2B"},neutral:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"},success:{50:"#F0FDF4",500:"#22C55E",600:"#16A34A"},danger:{50:"#FEF2F2",500:"#EF4444",600:"#DC2626"},warning:{50:"#FFFBEB",500:"#F59E0B",600:"#D97706"}},p={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem"},f={sm:"0.25rem",md:"0.5rem",lg:"0.75rem",xl:"1rem","2xl":"1.25rem",full:"9999px"},v={xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem"},h={normal:400,medium:500,semibold:600,bold:700},J={colors:g,spacing:p,borderRadius:f,fontSize:v,fontWeight:h};exports.Button=_;exports.Card=u;exports.borderRadius=f;exports.colors=g;exports.designTokens=J;exports.fontSize=v;exports.fontWeight=h;exports.spacing=p;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/Card/Card.tsx","../src/components/Button/Button.tsx","../src/styles/tokens.ts"],"sourcesContent":["import React from 'react';\nimport styles from './Card.module.css';\n\nexport interface CardProps {\n  /**\n   * Content to be rendered inside the card\n   */\n  children: React.ReactNode;\n\n  /**\n   * Additional CSS classes to apply to the card\n   */\n  className?: string;\n\n  /**\n   * Padding size for the card content\n   * @default 'md'\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\n  /**\n   * Click handler for the card\n   */\n  onClick?: () => void;\n\n  /**\n   * Whether to show hover effect\n   * @default true\n   */\n  hoverable?: boolean;\n}\n\nconst paddingClasses = {\n  none: styles.paddingNone,\n  sm: styles.paddingSm,\n  md: styles.paddingMd,\n  lg: styles.paddingLg,\n  xl: styles.paddingXl,\n};\n\n/**\n * Card component for displaying content in a contained, elevated surface\n *\n * @example\n * ```tsx\n * <Card padding=\"lg\">\n *   <h2>Card Title</h2>\n *   <p>Card content goes here</p>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      children,\n      className = '',\n      padding = 'md',\n      onClick,\n      hoverable = true,\n    },\n    ref\n  ) => {\n    const clickableClass = hoverable && onClick ? styles.clickable : '';\n    const paddingClass = paddingClasses[padding];\n\n    return (\n      <div\n        ref={ref}\n        className={`${styles.card} ${paddingClass} ${clickableClass} ${className}`}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n","import React from 'react';\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Visual style variant of the button\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';\n\n  /**\n   * Size of the button\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Whether the button is in a loading state\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Icon to display before the button text\n   */\n  leftIcon?: React.ReactNode;\n\n  /**\n   * Icon to display after the button text\n   */\n  rightIcon?: React.ReactNode;\n\n  /**\n   * Makes the button take full width of its container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Button content - can be omitted for icon-only buttons\n   */\n  children?: React.ReactNode;\n}\n\nconst variantClasses = {\n  primary: styles.variantPrimary,\n  secondary: styles.variantSecondary,\n  danger: styles.variantDanger,\n  success: styles.variantSuccess,\n  ghost: styles.variantGhost,\n};\n\nconst sizeClasses = {\n  sm: styles.sizeSm,\n  md: styles.sizeMd,\n  lg: styles.sizeLg,\n};\n\n/**\n * Button component with multiple variants and sizes\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"lg\">\n *   Click Me\n * </Button>\n *\n * <Button variant=\"secondary\" leftIcon={<Icon />}>\n *   With Icon\n * </Button>\n *\n * <Button variant=\"ghost\" leftIcon={<TrashIcon />} />\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      className = '',\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const baseClasses = styles.button;\n    const variantClass = variantClasses[variant];\n    const sizeClass = sizeClasses[size];\n    const widthClass = fullWidth ? styles.fullWidth : '';\n    const isDisabled = disabled || loading;\n\n    return (\n      <button\n        ref={ref}\n        className={`${baseClasses} ${variantClass} ${sizeClass} ${widthClass} ${className}`}\n        disabled={isDisabled}\n        {...props}\n      >\n        {loading && (\n          <svg\n            className={styles.spinner}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle\n              className=\"opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n            />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        )}\n        {!loading && leftIcon}\n        {children}\n        {!loading && rightIcon}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","/**\n * Design Tokens - JavaScript/TypeScript Export\n * Use these when you need to access design tokens in JS/TS\n * (e.g., for charts, calculations, or dynamic styling)\n */\n\nexport const colors = {\n  primary: {\n    50: '#EEF2F9',\n    100: '#D6E2F0',\n    200: '#B0C7E3',\n    300: '#89ACD5',\n    400: '#6691C8',\n    500: '#4A6FA5',\n    600: '#3C5A87',\n    700: '#2F4568',\n    800: '#21304A',\n    900: '#131B2B',\n  },\n  neutral: {\n    50: '#F9FAFB',\n    100: '#F3F4F6',\n    200: '#E5E7EB',\n    300: '#D1D5DB',\n    400: '#9CA3AF',\n    500: '#6B7280',\n    600: '#4B5563',\n    700: '#374151',\n    800: '#1F2937',\n    900: '#111827',\n  },\n  success: {\n    50: '#F0FDF4',\n    500: '#22C55E',\n    600: '#16A34A',\n  },\n  danger: {\n    50: '#FEF2F2',\n    500: '#EF4444',\n    600: '#DC2626',\n  },\n  warning: {\n    50: '#FFFBEB',\n    500: '#F59E0B',\n    600: '#D97706',\n  },\n} as const;\n\nexport const spacing = {\n  xs: '0.25rem',\n  sm: '0.5rem',\n  md: '1rem',\n  lg: '1.5rem',\n  xl: '2rem',\n  '2xl': '3rem',\n} as const;\n\nexport const borderRadius = {\n  sm: '0.25rem',\n  md: '0.5rem',\n  lg: '0.75rem',\n  xl: '1rem',\n  '2xl': '1.25rem',\n  full: '9999px',\n} as const;\n\nexport const fontSize = {\n  xs: '0.75rem',\n  sm: '0.875rem',\n  base: '1rem',\n  lg: '1.125rem',\n  xl: '1.25rem',\n  '2xl': '1.5rem',\n} as const;\n\nexport const fontWeight = {\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n} as const;\n\nexport const designTokens = {\n  colors,\n  spacing,\n  borderRadius,\n  fontSize,\n  fontWeight,\n} as const;\n"],"names":["paddingClasses","styles","Card","React","children","className","padding","onClick","hoverable","ref","clickableClass","paddingClass","jsx","variantClasses","sizeClasses","Button","variant","size","loading","leftIcon","rightIcon","fullWidth","disabled","props","baseClasses","variantClass","sizeClass","widthClass","isDisabled","jsxs","colors","spacing","borderRadius","fontSize","fontWeight","designTokens"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import './styles.css';
+export { Card } from './components/Card';
+export { Button } from './components/Button';
+export type { CardProps } from './components/Card';
+export type { ButtonProps } from './components/Button';
+export { designTokens, colors, spacing, borderRadius, fontSize, fontWeight } from './styles/tokens';

package/dist/index.js

@@ -0,0 +1,204 @@
+import { jsx as m, jsxs as l } from "react/jsx-runtime";
+import _ from "react";
+const y = "_card_hc8eo_2", b = "_clickable_hc8eo_13", z = "_paddingNone_hc8eo_18", S = "_paddingSm_hc8eo_22", x = "_paddingMd_hc8eo_26", B = "_paddingLg_hc8eo_30", D = "_paddingXl_hc8eo_34", n = {
+  card: y,
+  clickable: b,
+  paddingNone: z,
+  paddingSm: S,
+  paddingMd: x,
+  paddingLg: B,
+  paddingXl: D
+}, E = {
+  none: n.paddingNone,
+  sm: n.paddingSm,
+  md: n.paddingMd,
+  lg: n.paddingLg,
+  xl: n.paddingXl
+}, A = _.forwardRef(
+  ({
+    children: e,
+    className: r = "",
+    padding: t = "md",
+    onClick: a,
+    hoverable: i = !0
+  }, c) => {
+    const d = i && a ? n.clickable : "", o = E[t];
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: c,
+        className: `${n.card} ${o} ${d} ${r}`,
+        onClick: a,
+        children: e
+      }
+    );
+  }
+);
+A.displayName = "Card";
+const N = "_button_fmuu7_2", $ = "_sizeSm_fmuu7_20", w = "_sizeMd_fmuu7_27", M = "_sizeLg_fmuu7_34", L = "_variantPrimary_fmuu7_42", k = "_variantSecondary_fmuu7_55", W = "_variantDanger_fmuu7_68", G = "_variantSuccess_fmuu7_77", P = "_variantGhost_fmuu7_86", R = "_fullWidth_fmuu7_100", X = "_spinner_fmuu7_105", s = {
+  button: N,
+  sizeSm: $,
+  sizeMd: w,
+  sizeLg: M,
+  variantPrimary: L,
+  variantSecondary: k,
+  variantDanger: W,
+  variantSuccess: G,
+  variantGhost: P,
+  fullWidth: R,
+  spinner: X
+}, j = {
+  primary: s.variantPrimary,
+  secondary: s.variantSecondary,
+  danger: s.variantDanger,
+  success: s.variantSuccess,
+  ghost: s.variantGhost
+}, H = {
+  sm: s.sizeSm,
+  md: s.sizeMd,
+  lg: s.sizeLg
+}, T = _.forwardRef(
+  ({
+    children: e,
+    variant: r = "primary",
+    size: t = "md",
+    loading: a = !1,
+    leftIcon: i,
+    rightIcon: c,
+    fullWidth: d = !1,
+    className: o = "",
+    disabled: u,
+    ...g
+  }, p) => {
+    const f = s.button, v = j[r], h = H[t], F = d ? s.fullWidth : "", C = u || a;
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        ref: p,
+        className: `${f} ${v} ${h} ${F} ${o}`,
+        disabled: C,
+        ...g,
+        children: [
+          a && /* @__PURE__ */ l(
+            "svg",
+            {
+              className: s.spinner,
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ m(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ m(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          !a && i,
+          e,
+          !a && c
+        ]
+      }
+    );
+  }
+);
+T.displayName = "Button";
+const V = {
+  primary: {
+    50: "#EEF2F9",
+    100: "#D6E2F0",
+    200: "#B0C7E3",
+    300: "#89ACD5",
+    400: "#6691C8",
+    500: "#4A6FA5",
+    600: "#3C5A87",
+    700: "#2F4568",
+    800: "#21304A",
+    900: "#131B2B"
+  },
+  neutral: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827"
+  },
+  success: {
+    50: "#F0FDF4",
+    500: "#22C55E",
+    600: "#16A34A"
+  },
+  danger: {
+    50: "#FEF2F2",
+    500: "#EF4444",
+    600: "#DC2626"
+  },
+  warning: {
+    50: "#FFFBEB",
+    500: "#F59E0B",
+    600: "#D97706"
+  }
+}, q = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem"
+}, I = {
+  sm: "0.25rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem",
+  "2xl": "1.25rem",
+  full: "9999px"
+}, J = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem"
+}, K = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+}, U = {
+  colors: V,
+  spacing: q,
+  borderRadius: I,
+  fontSize: J,
+  fontWeight: K
+};
+export {
+  T as Button,
+  A as Card,
+  I as borderRadius,
+  V as colors,
+  U as designTokens,
+  J as fontSize,
+  K as fontWeight,
+  q as spacing
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Card/Card.tsx","../src/components/Button/Button.tsx","../src/styles/tokens.ts"],"sourcesContent":["import React from 'react';\nimport styles from './Card.module.css';\n\nexport interface CardProps {\n  /**\n   * Content to be rendered inside the card\n   */\n  children: React.ReactNode;\n\n  /**\n   * Additional CSS classes to apply to the card\n   */\n  className?: string;\n\n  /**\n   * Padding size for the card content\n   * @default 'md'\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\n  /**\n   * Click handler for the card\n   */\n  onClick?: () => void;\n\n  /**\n   * Whether to show hover effect\n   * @default true\n   */\n  hoverable?: boolean;\n}\n\nconst paddingClasses = {\n  none: styles.paddingNone,\n  sm: styles.paddingSm,\n  md: styles.paddingMd,\n  lg: styles.paddingLg,\n  xl: styles.paddingXl,\n};\n\n/**\n * Card component for displaying content in a contained, elevated surface\n *\n * @example\n * ```tsx\n * <Card padding=\"lg\">\n *   <h2>Card Title</h2>\n *   <p>Card content goes here</p>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      children,\n      className = '',\n      padding = 'md',\n      onClick,\n      hoverable = true,\n    },\n    ref\n  ) => {\n    const clickableClass = hoverable && onClick ? styles.clickable : '';\n    const paddingClass = paddingClasses[padding];\n\n    return (\n      <div\n        ref={ref}\n        className={`${styles.card} ${paddingClass} ${clickableClass} ${className}`}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n","import React from 'react';\nimport styles from './Button.module.css';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Visual style variant of the button\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';\n\n  /**\n   * Size of the button\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Whether the button is in a loading state\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Icon to display before the button text\n   */\n  leftIcon?: React.ReactNode;\n\n  /**\n   * Icon to display after the button text\n   */\n  rightIcon?: React.ReactNode;\n\n  /**\n   * Makes the button take full width of its container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Button content - can be omitted for icon-only buttons\n   */\n  children?: React.ReactNode;\n}\n\nconst variantClasses = {\n  primary: styles.variantPrimary,\n  secondary: styles.variantSecondary,\n  danger: styles.variantDanger,\n  success: styles.variantSuccess,\n  ghost: styles.variantGhost,\n};\n\nconst sizeClasses = {\n  sm: styles.sizeSm,\n  md: styles.sizeMd,\n  lg: styles.sizeLg,\n};\n\n/**\n * Button component with multiple variants and sizes\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"lg\">\n *   Click Me\n * </Button>\n *\n * <Button variant=\"secondary\" leftIcon={<Icon />}>\n *   With Icon\n * </Button>\n *\n * <Button variant=\"ghost\" leftIcon={<TrashIcon />} />\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      className = '',\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const baseClasses = styles.button;\n    const variantClass = variantClasses[variant];\n    const sizeClass = sizeClasses[size];\n    const widthClass = fullWidth ? styles.fullWidth : '';\n    const isDisabled = disabled || loading;\n\n    return (\n      <button\n        ref={ref}\n        className={`${baseClasses} ${variantClass} ${sizeClass} ${widthClass} ${className}`}\n        disabled={isDisabled}\n        {...props}\n      >\n        {loading && (\n          <svg\n            className={styles.spinner}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <circle\n              className=\"opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n            />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        )}\n        {!loading && leftIcon}\n        {children}\n        {!loading && rightIcon}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","/**\n * Design Tokens - JavaScript/TypeScript Export\n * Use these when you need to access design tokens in JS/TS\n * (e.g., for charts, calculations, or dynamic styling)\n */\n\nexport const colors = {\n  primary: {\n    50: '#EEF2F9',\n    100: '#D6E2F0',\n    200: '#B0C7E3',\n    300: '#89ACD5',\n    400: '#6691C8',\n    500: '#4A6FA5',\n    600: '#3C5A87',\n    700: '#2F4568',\n    800: '#21304A',\n    900: '#131B2B',\n  },\n  neutral: {\n    50: '#F9FAFB',\n    100: '#F3F4F6',\n    200: '#E5E7EB',\n    300: '#D1D5DB',\n    400: '#9CA3AF',\n    500: '#6B7280',\n    600: '#4B5563',\n    700: '#374151',\n    800: '#1F2937',\n    900: '#111827',\n  },\n  success: {\n    50: '#F0FDF4',\n    500: '#22C55E',\n    600: '#16A34A',\n  },\n  danger: {\n    50: '#FEF2F2',\n    500: '#EF4444',\n    600: '#DC2626',\n  },\n  warning: {\n    50: '#FFFBEB',\n    500: '#F59E0B',\n    600: '#D97706',\n  },\n} as const;\n\nexport const spacing = {\n  xs: '0.25rem',\n  sm: '0.5rem',\n  md: '1rem',\n  lg: '1.5rem',\n  xl: '2rem',\n  '2xl': '3rem',\n} as const;\n\nexport const borderRadius = {\n  sm: '0.25rem',\n  md: '0.5rem',\n  lg: '0.75rem',\n  xl: '1rem',\n  '2xl': '1.25rem',\n  full: '9999px',\n} as const;\n\nexport const fontSize = {\n  xs: '0.75rem',\n  sm: '0.875rem',\n  base: '1rem',\n  lg: '1.125rem',\n  xl: '1.25rem',\n  '2xl': '1.5rem',\n} as const;\n\nexport const fontWeight = {\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n} as const;\n\nexport const designTokens = {\n  colors,\n  spacing,\n  borderRadius,\n  fontSize,\n  fontWeight,\n} as const;\n"],"names":["paddingClasses","styles","Card","React","children","className","padding","onClick","hoverable","ref","clickableClass","paddingClass","jsx","variantClasses","sizeClasses","Button","variant","size","loading","leftIcon","rightIcon","fullWidth","disabled","props","baseClasses","variantClass","sizeClass","widthClass","isDisabled","jsxs","colors","spacing","borderRadius","fontSize","fontWeight","designTokens"],"mappings":"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"}

package/dist/styles/tokens.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Design Tokens - JavaScript/TypeScript Export
+ * Use these when you need to access design tokens in JS/TS
+ * (e.g., for charts, calculations, or dynamic styling)
+ */
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#EEF2F9";
+        readonly 100: "#D6E2F0";
+        readonly 200: "#B0C7E3";
+        readonly 300: "#89ACD5";
+        readonly 400: "#6691C8";
+        readonly 500: "#4A6FA5";
+        readonly 600: "#3C5A87";
+        readonly 700: "#2F4568";
+        readonly 800: "#21304A";
+        readonly 900: "#131B2B";
+    };
+    readonly neutral: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F3F4F6";
+        readonly 200: "#E5E7EB";
+        readonly 300: "#D1D5DB";
+        readonly 400: "#9CA3AF";
+        readonly 500: "#6B7280";
+        readonly 600: "#4B5563";
+        readonly 700: "#374151";
+        readonly 800: "#1F2937";
+        readonly 900: "#111827";
+    };
+    readonly success: {
+        readonly 50: "#F0FDF4";
+        readonly 500: "#22C55E";
+        readonly 600: "#16A34A";
+    };
+    readonly danger: {
+        readonly 50: "#FEF2F2";
+        readonly 500: "#EF4444";
+        readonly 600: "#DC2626";
+    };
+    readonly warning: {
+        readonly 50: "#FFFBEB";
+        readonly 500: "#F59E0B";
+        readonly 600: "#D97706";
+    };
+};
+export declare const spacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+};
+export declare const borderRadius: {
+    readonly sm: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly xl: "1rem";
+    readonly '2xl': "1.25rem";
+    readonly full: "9999px";
+};
+export declare const fontSize: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly base: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+};
+export declare const fontWeight: {
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+export declare const designTokens: {
+    readonly colors: {
+        readonly primary: {
+            readonly 50: "#EEF2F9";
+            readonly 100: "#D6E2F0";
+            readonly 200: "#B0C7E3";
+            readonly 300: "#89ACD5";
+            readonly 400: "#6691C8";
+            readonly 500: "#4A6FA5";
+            readonly 600: "#3C5A87";
+            readonly 700: "#2F4568";
+            readonly 800: "#21304A";
+            readonly 900: "#131B2B";
+        };
+        readonly neutral: {
+            readonly 50: "#F9FAFB";
+            readonly 100: "#F3F4F6";
+            readonly 200: "#E5E7EB";
+            readonly 300: "#D1D5DB";
+            readonly 400: "#9CA3AF";
+            readonly 500: "#6B7280";
+            readonly 600: "#4B5563";
+            readonly 700: "#374151";
+            readonly 800: "#1F2937";
+            readonly 900: "#111827";
+        };
+        readonly success: {
+            readonly 50: "#F0FDF4";
+            readonly 500: "#22C55E";
+            readonly 600: "#16A34A";
+        };
+        readonly danger: {
+            readonly 50: "#FEF2F2";
+            readonly 500: "#EF4444";
+            readonly 600: "#DC2626";
+        };
+        readonly warning: {
+            readonly 50: "#FFFBEB";
+            readonly 500: "#F59E0B";
+            readonly 600: "#D97706";
+        };
+    };
+    readonly spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+    };
+    readonly borderRadius: {
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly '2xl': "1.25rem";
+        readonly full: "9999px";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+    };
+    readonly fontWeight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+};

package/dist/ui-prokit.css

@@ -0,0 +1 @@
+:root{--ui-color-primary-50: #EEF2F9;--ui-color-primary-100: #D6E2F0;--ui-color-primary-200: #B0C7E3;--ui-color-primary-300: #89ACD5;--ui-color-primary-400: #6691C8;--ui-color-primary-500: #4A6FA5;--ui-color-primary-600: #3C5A87;--ui-color-primary-700: #2F4568;--ui-color-primary-800: #21304A;--ui-color-primary-900: #131B2B;--ui-color-neutral-50: #F9FAFB;--ui-color-neutral-100: #F3F4F6;--ui-color-neutral-200: #E5E7EB;--ui-color-neutral-300: #D1D5DB;--ui-color-neutral-400: #9CA3AF;--ui-color-neutral-500: #6B7280;--ui-color-neutral-600: #4B5563;--ui-color-neutral-700: #374151;--ui-color-neutral-800: #1F2937;--ui-color-neutral-900: #111827;--ui-color-success-50: #F0FDF4;--ui-color-success-500: #22C55E;--ui-color-success-600: #16A34A;--ui-color-danger-50: #FEF2F2;--ui-color-danger-500: #EF4444;--ui-color-danger-600: #DC2626;--ui-color-warning-50: #FFFBEB;--ui-color-warning-500: #F59E0B;--ui-color-warning-600: #D97706;--ui-spacing-xs: .25rem;--ui-spacing-sm: .5rem;--ui-spacing-md: 1rem;--ui-spacing-lg: 1.5rem;--ui-spacing-xl: 2rem;--ui-spacing-2xl: 3rem;--ui-radius-sm: .25rem;--ui-radius-md: .5rem;--ui-radius-lg: .75rem;--ui-radius-xl: 1rem;--ui-radius-2xl: 1.25rem;--ui-radius-full: 9999px;--ui-button-radius-sm: .5rem;--ui-button-radius-md: 1.25rem;--ui-button-radius-lg: 1rem;--ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--ui-shadow-md: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--ui-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--ui-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ui-shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--ui-font-size-xs: .75rem;--ui-font-size-sm: .875rem;--ui-font-size-base: 1rem;--ui-font-size-lg: 1.125rem;--ui-font-size-xl: 1.25rem;--ui-font-size-2xl: 1.5rem;--ui-font-weight-normal: 400;--ui-font-weight-medium: 500;--ui-font-weight-semibold: 600;--ui-font-weight-bold: 700;--ui-transition-fast: .15s;--ui-transition-base: .2s;--ui-transition-slow: .3s}*,*:before,*:after{box-sizing:border-box}._card_hc8eo_2{background-color:var(--ui-bg-card, white);border-radius:var(--ui-radius-xl, 1rem);box-shadow:var(--ui-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06));transition:box-shadow var(--ui-transition-base, .2s) ease-in-out}._card_hc8eo_2:hover{box-shadow:var(--ui-shadow-lg, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}._clickable_hc8eo_13{cursor:pointer}._paddingNone_hc8eo_18{padding:0}._paddingSm_hc8eo_22{padding:var(--ui-spacing-sm, .5rem)}._paddingMd_hc8eo_26{padding:var(--ui-spacing-md, 1rem)}._paddingLg_hc8eo_30{padding:var(--ui-spacing-lg, 1.5rem)}._paddingXl_hc8eo_34{padding:var(--ui-spacing-xl, 2rem)}._button_fmuu7_2{font-weight:var(--ui-font-weight-medium, 500);transition:background-color var(--ui-transition-base, .2s) ease,color var(--ui-transition-base, .2s) ease;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit}._button_fmuu7_2:disabled{opacity:.5;cursor:not-allowed}._sizeSm_fmuu7_20{padding:8px 24px;font-size:var(--ui-font-size-sm, .875rem);gap:.375rem;border-radius:var(--ui-button-radius-lg, .5rem)}._sizeMd_fmuu7_27{padding:11px 33px;font-size:var(--ui-font-size-base, 1rem);gap:.5rem;border-radius:var(--ui-button-radius-md, 1.25rem)}._sizeLg_fmuu7_34{padding:14px 42px;font-size:var(--ui-font-size-lg, 1.125rem);gap:.625rem;border-radius:var( --ui-radius-2xl, 1rem)}._variantPrimary_fmuu7_42{background-color:var(--ui-color-primary-500, #4A6FA5);color:#fff}._variantPrimary_fmuu7_42:hover:not(:disabled){background-color:var(--ui-color-primary-600, #3C5A87)}._variantPrimary_fmuu7_42:active:not(:disabled){background-color:var(--ui-color-primary-700, #2F4568)}._variantSecondary_fmuu7_55{background-color:var(--ui-color-neutral-100, #F3F4F6);color:var(--ui-color-neutral-900, #111827)}._variantSecondary_fmuu7_55:hover:not(:disabled){background-color:var(--ui-color-neutral-200, #E5E7EB)}._variantSecondary_fmuu7_55:active:not(:disabled){background-color:var(--ui-color-neutral-300, #D1D5DB)}._variantDanger_fmuu7_68{background-color:var(--ui-color-danger-500, #EF4444);color:#fff}._variantDanger_fmuu7_68:hover:not(:disabled){background-color:var(--ui-color-danger-600, #DC2626)}._variantSuccess_fmuu7_77{background-color:var(--ui-color-success-500, #22C55E);color:#fff}._variantSuccess_fmuu7_77:hover:not(:disabled){background-color:var(--ui-color-success-600, #16A34A)}._variantGhost_fmuu7_86{background-color:transparent;color:var(--ui-color-neutral-700, #374151)}._variantGhost_fmuu7_86:hover:not(:disabled){background-color:var(--ui-color-neutral-100, #F3F4F6)}._variantGhost_fmuu7_86:active:not(:disabled){background-color:var(--ui-color-neutral-200, #E5E7EB)}._fullWidth_fmuu7_100{width:100%}._spinner_fmuu7_105{animation:_spin_fmuu7_105 1s linear infinite;height:1rem;width:1rem}@keyframes _spin_fmuu7_105{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "ui-prokit",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern, reusable UI component library built with React and TypeScript",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/ui-prokit.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "css-modules",
+    "typescript"
+  ],
+  "author": "Juti B",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  }
+}