cephie-ui 1.0.0

package/README.md

@@ -0,0 +1,104 @@
+# 🎨 cephie-ui
+
+A production-ready React component library built with TypeScript, optimized for Next.js, and compiled with Bun.
+
+## Installation
+
+```bash
+npm install cephie-ui
+# or
+yarn add cephie-ui
+# or
+bun add cephie-ui
+```
+
+## Usage
+
+### Dropdown Component
+
+```tsx
+import { Dropdown, DropdownItem } from 'cephie-ui';
+
+export default function MyComponent() {
+  return (
+    <Dropdown trigger="Menu">
+      <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>
+      <DropdownItem onClick={() => console.log('Delete')}>Delete</DropdownItem>
+    </Dropdown>
+  );
+}
+```
+
+### Button Component
+
+```tsx
+import { Button } from 'cephie-ui';
+
+export default function MyComponent() {
+  return (
+    <>
+      <Button>Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="danger" size="lg">Delete</Button>
+    </>
+  );
+}
+```
+
+### Badge Component
+
+```tsx
+import { Badge } from 'cephie-ui';
+
+export default function MyComponent() {
+  return (
+    <>
+      <Badge>Default</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+    </>
+  );
+}
+```
+
+## Development
+
+### Install Dependencies
+
+```bash
+bun install
+```
+
+### Build
+
+```bash
+bun run build
+```
+
+### Watch Mode
+
+```bash
+bun run dev
+```
+
+## Components
+
+- **Dropdown** - Flexible dropdown menu component
+- **Button** - Styled button with variants and sizes
+- **Badge** - Status badge with multiple variants
+
+## Features
+
+✅ Built with TypeScript
+✅ React 18+ compatible
+✅ Next.js ready
+✅ ESM and CommonJS support
+✅ Tree-shakeable
+✅ Fully typed
+✅ Tailwind CSS ready
+
+## License
+
+ISC

package/dist/Background.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function Background({ className, style }: {
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Background.d.ts.map

package/dist/Background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../src/components/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAClC,SAAc,EACd,KAAU,EACV,EAAE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,2CAoBA"}

package/dist/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function Button({ variant, mode, href, newTab, className, style, children, type, disabled, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    mode?: 'light' | 'dark';
+    href?: string;
+    newTab?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,OAAmB,EACnB,IAAa,EACb,IAAI,EACJ,MAAc,EACd,SAAc,EACd,KAAU,EACV,QAAQ,EACR,IAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,2CA2BA"}

package/dist/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface DropdownProps {
+    label?: string;
+    icon?: React.ReactNode;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: string;
+    onChange?: (e: {
+        target: {
+            name: string;
+            value: string;
+        };
+    }) => void;
+    name?: string;
+    id?: string;
+    className?: string;
+    required?: boolean;
+    mode?: 'light' | 'dark';
+}
+export default function Dropdown({ label, icon, options, value, onChange, name, id, className, required, mode }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,UAAU,aAAa;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,MAAM,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB;AAsCD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAS,EACT,EAAO,EACP,SAAc,EACd,QAAgB,EAChB,IAAa,EACb,EAAE,aAAa,2CAwIf"}

package/dist/LoadingSpinner.d.ts

@@ -0,0 +1,5 @@
+export default function LoadingSpinner({ size, mode }: {
+    size?: 'small' | 'medium' | 'large';
+    mode?: 'light' | 'dark';
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingSpinner.d.ts.map

package/dist/LoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACtC,IAAe,EACf,IAAa,EACb,EAAE;IACF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB,2CAQA"}

package/dist/index.cjs

@@ -0,0 +1,309 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Background: () => Background,
+  Button: () => Button,
+  Dropdown: () => Dropdown,
+  LoadingSpinner: () => LoadingSpinner
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var variantClasses = {
+  light: {
+    primary: "bg-zinc-950 text-white hover:bg-zinc-800 focus-visible:outline-zinc-900",
+    secondary: "bg-zinc-200 text-zinc-900 hover:bg-zinc-300 focus-visible:outline-zinc-400",
+    success: "bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800"
+  },
+  dark: {
+    primary: "bg-zinc-50 text-zinc-950 hover:bg-zinc-200 focus-visible:outline-zinc-50",
+    secondary: "bg-zinc-800 text-zinc-50 hover:bg-zinc-700 focus-visible:outline-zinc-700",
+    success: "bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800"
+  }
+};
+function Button({
+  variant = "primary",
+  mode = "dark",
+  href,
+  newTab = false,
+  className = "",
+  style = {},
+  children,
+  type = "button",
+  disabled,
+  ...props
+}) {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: `rounded-2xl px-6 py-3 text-sm font-semibold shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[mode][variant]} ${className}`,
+      style,
+      type,
+      disabled,
+      ...props,
+      children
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        href,
+        target: newTab ? "_blank" : "_self",
+        rel: "noopener noreferrer",
+        className: "contents",
+        children: content
+      }
+    );
+  }
+  return content;
+}
+
+// src/components/Dropdown.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var triggerClasses = {
+  light: "bg-zinc-50 border-zinc-200 text-zinc-900 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white",
+  dark: "bg-zinc-900/50 border-zinc-800 text-zinc-50 focus:ring-zinc-700 focus:border-zinc-600 focus:bg-zinc-900"
+};
+var chevronClasses = {
+  light: "text-zinc-400",
+  dark: "text-zinc-500"
+};
+var dropdownListClasses = {
+  light: "bg-white border-zinc-200 shadow-xl",
+  dark: "bg-zinc-900 border-zinc-800 shadow-2xl backdrop-blur-xl"
+};
+var optionClasses = {
+  light: {
+    selected: "text-blue-600 bg-blue-50/50",
+    unselected: "text-zinc-700",
+    hover: "hover:bg-zinc-50"
+  },
+  dark: {
+    selected: "text-zinc-50 bg-zinc-800",
+    unselected: "text-zinc-400",
+    hover: "hover:bg-zinc-800"
+  }
+};
+var iconClasses = {
+  light: "text-blue-500",
+  dark: "text-zinc-400"
+};
+function Dropdown({
+  label,
+  icon,
+  options,
+  value,
+  onChange,
+  name = "",
+  id = "",
+  className = "",
+  required = false,
+  mode = "dark"
+}) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const dropdownRef = (0, import_react.useRef)(null);
+  const selectedOption = options.find(
+    (opt) => String(opt.value).trim() === String(value).trim()
+  );
+  const displayLabel = selectedOption ? selectedOption.label : value ? String(value).length > 20 ? `${String(value).substring(0, 8)}...${String(value).substring(String(value).length - 4)}` : String(value) : "Select an option...";
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (optionValue) => {
+    if (onChange) {
+      onChange({
+        target: {
+          name,
+          value: optionValue
+        }
+      });
+    }
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `space-y-1.5 ${className}`, ref: dropdownRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "label",
+      {
+        htmlFor: id || name,
+        className: "flex items-center text-xs font-bold uppercase tracking-wider text-zinc-500 ml-1 font-montserrat",
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `mr-2 ${iconClasses[mode]}`, children: icon }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsOpen(!isOpen),
+          className: `w-full px-4 py-3 border rounded-xl focus:ring-2 outline-none transition-colors font-montserrat cursor-pointer flex items-center justify-between text-left text-sm ${triggerClasses[mode]}`,
+          "aria-haspopup": "listbox",
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: displayLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: `transition-transform duration-200 ${chevronClasses[mode]} ${isOpen ? "rotate-180" : ""}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "svg",
+                  {
+                    className: "w-4 h-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2",
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: `absolute z-50 w-full mt-2 border rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 ${dropdownListClasses[mode]}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              role: "listbox",
+              className: "py-1.5 px-1.5 max-h-60 overflow-y-auto",
+              children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSelect(option.value),
+                  className: `w-full px-4 py-2.5 rounded-xl text-left font-montserrat transition-colors flex items-center justify-between text-sm ${optionClasses[mode].hover} ${String(option.value) === String(value) ? optionClasses[mode].selected : optionClasses[mode].unselected}`,
+                  role: "option",
+                  "aria-selected": String(option.value) === String(value),
+                  children: [
+                    option.label,
+                    String(option.value) === String(value) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "svg",
+                      {
+                        className: "w-3.5 h-3.5",
+                        fill: "currentColor",
+                        viewBox: "0 0 20 20",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                            clipRule: "evenodd"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value,
+          required
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/LoadingSpinner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeClasses = {
+  small: "h-4 w-4 border-2",
+  medium: "h-8 w-8 border-3",
+  large: "h-12 w-12 border-4"
+};
+var modeClasses = {
+  light: "border-zinc-200 border-t-zinc-800",
+  dark: "border-zinc-800 border-t-zinc-200"
+};
+function LoadingSpinner({
+  size = "medium",
+  mode = "dark"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: `${sizeClasses[size]} ${modeClasses[mode]} animate-spin rounded-full`
+    }
+  ) });
+}
+
+// src/components/Background.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Background({
+  className = "",
+  style = {}
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: `absolute inset-0 z-0 pointer-events-none flex items-center justify-center blur-3xl ${className}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: "absolute left-1/2 top-0 -translate-x-1/2 rotate-20 opacity-30",
+          style: {
+            width: "60rem",
+            aspectRatio: "1200/700",
+            background: "linear-gradient(to top right, #38bdf8, #1e40af)",
+            clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+            ...style
+          }
+        }
+      )
+    }
+  );
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/index.ts", "../src/components/Button.tsx", "../src/components/Dropdown.tsx", "../src/components/LoadingSpinner.tsx", "../src/components/Background.tsx"],
+  "sourcesContent": ["export { default as Button } from './Button';\nexport { default as Dropdown } from './Dropdown';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Background } from './Background';\n", "import React from 'react';\n\nconst variantClasses: Record<\n\t'light' | 'dark',\n\tRecord<'primary' | 'secondary' | 'success' | 'danger', string>\n> = {\n\tlight: {\n\t\tprimary:\n\t\t\t'bg-zinc-950 text-white hover:bg-zinc-800 focus-visible:outline-zinc-900',\n\t\tsecondary:\n\t\t\t'bg-zinc-200 text-zinc-900 hover:bg-zinc-300 focus-visible:outline-zinc-400',\n\t\tsuccess:\n\t\t\t'bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800',\n\t\tdanger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800'\n\t},\n\tdark: {\n\t\tprimary:\n\t\t\t'bg-zinc-50 text-zinc-950 hover:bg-zinc-200 focus-visible:outline-zinc-50',\n\t\tsecondary:\n\t\t\t'bg-zinc-800 text-zinc-50 hover:bg-zinc-700 focus-visible:outline-zinc-700',\n\t\tsuccess:\n\t\t\t'bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800',\n\t\tdanger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800'\n\t}\n};\n\nexport default function Button({\n\tvariant = 'primary',\n\tmode = 'dark',\n\thref,\n\tnewTab = false,\n\tclassName = '',\n\tstyle = {},\n\tchildren,\n\ttype = 'button',\n\tdisabled,\n\t...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tvariant?: 'primary' | 'secondary' | 'success' | 'danger';\n\tmode?: 'light' | 'dark';\n\thref?: string;\n\tnewTab?: boolean;\n}) {\n\tconst content = (\n\t\t<button\n\t\t\tclassName={`rounded-2xl px-6 py-3 text-sm font-semibold shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[mode][variant]} ${className}`}\n\t\t\tstyle={style}\n\t\t\ttype={type}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n\n\tif (href) {\n\t\treturn (\n\t\t\t<a\n\t\t\t\thref={href}\n\t\t\t\ttarget={newTab ? '_blank' : '_self'}\n\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\tclassName=\"contents\"\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn content;\n}\n", "import React, { useState, useRef, useEffect } from 'react';\r\n\r\ninterface DropdownProps {\r\n\tlabel?: string;\r\n\ticon?: React.ReactNode;\r\n\toptions: { label: string; value: string }[];\r\n\tvalue?: string;\r\n\tonChange?: (e: { target: { name: string; value: string } }) => void;\r\n\tname?: string;\r\n\tid?: string;\r\n\tclassName?: string;\r\n\trequired?: boolean;\r\n\tmode?: 'light' | 'dark';\r\n}\r\n\r\nconst triggerClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'bg-zinc-50 border-zinc-200 text-zinc-900 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white',\r\n\tdark: 'bg-zinc-900/50 border-zinc-800 text-zinc-50 focus:ring-zinc-700 focus:border-zinc-600 focus:bg-zinc-900'\r\n};\r\n\r\nconst chevronClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'text-zinc-400',\r\n\tdark: 'text-zinc-500'\r\n};\r\n\r\nconst dropdownListClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'bg-white border-zinc-200 shadow-xl',\r\n\tdark: 'bg-zinc-900 border-zinc-800 shadow-2xl backdrop-blur-xl'\r\n};\r\n\r\nconst optionClasses: Record<\r\n\t'light' | 'dark',\r\n\t{ selected: string; unselected: string; hover: string }\r\n> = {\r\n\tlight: {\r\n\t\tselected: 'text-blue-600 bg-blue-50/50',\r\n\t\tunselected: 'text-zinc-700',\r\n\t\thover: 'hover:bg-zinc-50'\r\n\t},\r\n\tdark: {\r\n\t\tselected: 'text-zinc-50 bg-zinc-800',\r\n\t\tunselected: 'text-zinc-400',\r\n\t\thover: 'hover:bg-zinc-800'\r\n\t}\r\n};\r\n\r\nconst iconClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'text-blue-500',\r\n\tdark: 'text-zinc-400'\r\n};\r\n\r\nexport default function Dropdown({\r\n\tlabel,\r\n\ticon,\r\n\toptions,\r\n\tvalue,\r\n\tonChange,\r\n\tname = '',\r\n\tid = '',\r\n\tclassName = '',\r\n\trequired = false,\r\n\tmode = 'dark'\r\n}: DropdownProps) {\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n\tconst selectedOption = options.find(\r\n\t\t(opt) => String(opt.value).trim() === String(value).trim()\r\n\t);\r\n\tconst displayLabel = selectedOption\r\n\t\t? selectedOption.label\r\n\t\t: value\r\n\t\t\t? String(value).length > 20\r\n\t\t\t\t? `${String(value).substring(0, 8)}...${String(value).substring(String(value).length - 4)}`\r\n\t\t\t\t: String(value)\r\n\t\t\t: 'Select an option...';\r\n\r\n\tuseEffect(() => {\r\n\t\tconst handleClickOutside = (event: MouseEvent) => {\r\n\t\t\tif (\r\n\t\t\t\tdropdownRef.current &&\r\n\t\t\t\t!dropdownRef.current.contains(event.target as Node)\r\n\t\t\t) {\r\n\t\t\t\tsetIsOpen(false);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\r\n\t\treturn () =>\r\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\r\n\t}, []);\r\n\r\n\tconst handleSelect = (optionValue: string) => {\r\n\t\tif (onChange) {\r\n\t\t\tonChange({\r\n\t\t\t\ttarget: {\r\n\t\t\t\t\tname,\r\n\t\t\t\t\tvalue: optionValue\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\tsetIsOpen(false);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className={`space-y-1.5 ${className}`} ref={dropdownRef}>\r\n\t\t\t{label && (\r\n\t\t\t\t<label\r\n\t\t\t\t\thtmlFor={id || name}\r\n\t\t\t\t\tclassName=\"flex items-center text-xs font-bold uppercase tracking-wider text-zinc-500 ml-1 font-montserrat\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{icon && (\r\n\t\t\t\t\t\t<span className={`mr-2 ${iconClasses[mode]}`}>\r\n\t\t\t\t\t\t\t{icon}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t{label}\r\n\t\t\t\t</label>\r\n\t\t\t)}\r\n\t\t\t<div className=\"relative\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tonClick={() => setIsOpen(!isOpen)}\r\n\t\t\t\t\tclassName={`w-full px-4 py-3 border rounded-xl focus:ring-2 outline-none transition-colors font-montserrat cursor-pointer flex items-center justify-between text-left text-sm ${triggerClasses[mode]}`}\r\n\t\t\t\t\taria-haspopup=\"listbox\"\r\n\t\t\t\t\taria-expanded={isOpen}\r\n\t\t\t\t>\r\n\t\t\t\t\t<span className=\"truncate\">{displayLabel}</span>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`transition-transform duration-200 ${chevronClasses[mode]} ${isOpen ? 'rotate-180' : ''}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\tclassName=\"w-4 h-4\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\r\n\t\t\t\t\t\t\t\td=\"M19 9l-7 7-7-7\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</button>\r\n\r\n\t\t\t\t{isOpen && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`absolute z-50 w-full mt-2 border rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 ${dropdownListClasses[mode]}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t\t\t\tclassName=\"py-1.5 px-1.5 max-h-60 overflow-y-auto\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{options.map((option) => (\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tkey={option.value}\r\n\t\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => handleSelect(option.value)}\r\n\t\t\t\t\t\t\t\t\tclassName={`w-full px-4 py-2.5 rounded-xl text-left font-montserrat transition-colors flex items-center justify-between text-sm ${optionClasses[mode].hover} ${\r\n\t\t\t\t\t\t\t\t\t\tString(option.value) === String(value)\r\n\t\t\t\t\t\t\t\t\t\t\t? optionClasses[mode].selected\r\n\t\t\t\t\t\t\t\t\t\t\t: optionClasses[mode].unselected\r\n\t\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\t\trole=\"option\"\r\n\t\t\t\t\t\t\t\t\taria-selected={\r\n\t\t\t\t\t\t\t\t\t\tString(option.value) === String(value)\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{option.label}\r\n\t\t\t\t\t\t\t\t\t{String(option.value) === String(value) && (\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-3.5 h-3.5\"\r\n\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 20 20\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t\t<input\r\n\t\t\t\t\ttype=\"hidden\"\r\n\t\t\t\t\tname={name}\r\n\t\t\t\t\tvalue={value}\r\n\t\t\t\t\trequired={required}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n", "import React from 'react';\n\nconst sizeClasses: Record<'small' | 'medium' | 'large', string> = {\n\tsmall: 'h-4 w-4 border-2',\n\tmedium: 'h-8 w-8 border-3',\n\tlarge: 'h-12 w-12 border-4'\n};\n\nconst modeClasses: Record<'light' | 'dark', string> = {\n\tlight: 'border-zinc-200 border-t-zinc-800',\n\tdark: 'border-zinc-800 border-t-zinc-200'\n};\n\nexport default function LoadingSpinner({\n\tsize = 'medium',\n\tmode = 'dark'\n}: {\n\tsize?: 'small' | 'medium' | 'large';\n\tmode?: 'light' | 'dark';\n}) {\n\treturn (\n\t\t<div className=\"flex items-center justify-center\">\n\t\t\t<div\n\t\t\t\tclassName={`${sizeClasses[size]} ${modeClasses[mode]} animate-spin rounded-full`}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n", "import React from 'react';\n\nexport default function Background({\n\tclassName = '',\n\tstyle = {}\n}: {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={`absolute inset-0 z-0 pointer-events-none flex items-center justify-center blur-3xl ${className}`}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"absolute left-1/2 top-0 -translate-x-1/2 rotate-20 opacity-30\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '60rem',\n\t\t\t\t\taspectRatio: '1200/700',\n\t\t\t\t\tbackground:\n\t\t\t\t\t\t'linear-gradient(to top right, #38bdf8, #1e40af)',\n\t\t\t\t\tclipPath:\n\t\t\t\t\t\t'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n\t\t\t\t\t...style\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["import_jsx_runtime", "import_jsx_runtime", "import_jsx_runtime"]
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './Button';
+export { default as Dropdown } from './Dropdown';
+export { default as LoadingSpinner } from './LoadingSpinner';
+export { default as Background } from './Background';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,286 @@
+// src/components/Button.tsx
+import { jsx } from "react/jsx-runtime";
+var variantClasses = {
+  light: {
+    primary: "bg-zinc-950 text-white hover:bg-zinc-800 focus-visible:outline-zinc-900",
+    secondary: "bg-zinc-200 text-zinc-900 hover:bg-zinc-300 focus-visible:outline-zinc-400",
+    success: "bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800"
+  },
+  dark: {
+    primary: "bg-zinc-50 text-zinc-950 hover:bg-zinc-200 focus-visible:outline-zinc-50",
+    secondary: "bg-zinc-800 text-zinc-50 hover:bg-zinc-700 focus-visible:outline-zinc-700",
+    success: "bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800",
+    danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800"
+  }
+};
+function Button({
+  variant = "primary",
+  mode = "dark",
+  href,
+  newTab = false,
+  className = "",
+  style = {},
+  children,
+  type = "button",
+  disabled,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: `rounded-2xl px-6 py-3 text-sm font-semibold shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[mode][variant]} ${className}`,
+      style,
+      type,
+      disabled,
+      ...props,
+      children
+    }
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: newTab ? "_blank" : "_self",
+        rel: "noopener noreferrer",
+        className: "contents",
+        children: content
+      }
+    );
+  }
+  return content;
+}
+
+// src/components/Dropdown.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var triggerClasses = {
+  light: "bg-zinc-50 border-zinc-200 text-zinc-900 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white",
+  dark: "bg-zinc-900/50 border-zinc-800 text-zinc-50 focus:ring-zinc-700 focus:border-zinc-600 focus:bg-zinc-900"
+};
+var chevronClasses = {
+  light: "text-zinc-400",
+  dark: "text-zinc-500"
+};
+var dropdownListClasses = {
+  light: "bg-white border-zinc-200 shadow-xl",
+  dark: "bg-zinc-900 border-zinc-800 shadow-2xl backdrop-blur-xl"
+};
+var optionClasses = {
+  light: {
+    selected: "text-blue-600 bg-blue-50/50",
+    unselected: "text-zinc-700",
+    hover: "hover:bg-zinc-50"
+  },
+  dark: {
+    selected: "text-zinc-50 bg-zinc-800",
+    unselected: "text-zinc-400",
+    hover: "hover:bg-zinc-800"
+  }
+};
+var iconClasses = {
+  light: "text-blue-500",
+  dark: "text-zinc-400"
+};
+function Dropdown({
+  label,
+  icon,
+  options,
+  value,
+  onChange,
+  name = "",
+  id = "",
+  className = "",
+  required = false,
+  mode = "dark"
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const selectedOption = options.find(
+    (opt) => String(opt.value).trim() === String(value).trim()
+  );
+  const displayLabel = selectedOption ? selectedOption.label : value ? String(value).length > 20 ? `${String(value).substring(0, 8)}...${String(value).substring(String(value).length - 4)}` : String(value) : "Select an option...";
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (optionValue) => {
+    if (onChange) {
+      onChange({
+        target: {
+          name,
+          value: optionValue
+        }
+      });
+    }
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-1.5 ${className}`, ref: dropdownRef, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id || name,
+        className: "flex items-center text-xs font-bold uppercase tracking-wider text-zinc-500 ml-1 font-montserrat",
+        children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: `mr-2 ${iconClasses[mode]}`, children: icon }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsOpen(!isOpen),
+          className: `w-full px-4 py-3 border rounded-xl focus:ring-2 outline-none transition-colors font-montserrat cursor-pointer flex items-center justify-between text-left text-sm ${triggerClasses[mode]}`,
+          "aria-haspopup": "listbox",
+          "aria-expanded": isOpen,
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "truncate", children: displayLabel }),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: `transition-transform duration-200 ${chevronClasses[mode]} ${isOpen ? "rotate-180" : ""}`,
+                children: /* @__PURE__ */ jsx2(
+                  "svg",
+                  {
+                    className: "w-4 h-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx2(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2",
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: `absolute z-50 w-full mt-2 border rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 ${dropdownListClasses[mode]}`,
+          children: /* @__PURE__ */ jsx2(
+            "div",
+            {
+              role: "listbox",
+              className: "py-1.5 px-1.5 max-h-60 overflow-y-auto",
+              children: options.map((option) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSelect(option.value),
+                  className: `w-full px-4 py-2.5 rounded-xl text-left font-montserrat transition-colors flex items-center justify-between text-sm ${optionClasses[mode].hover} ${String(option.value) === String(value) ? optionClasses[mode].selected : optionClasses[mode].unselected}`,
+                  role: "option",
+                  "aria-selected": String(option.value) === String(value),
+                  children: [
+                    option.label,
+                    String(option.value) === String(value) && /* @__PURE__ */ jsx2(
+                      "svg",
+                      {
+                        className: "w-3.5 h-3.5",
+                        fill: "currentColor",
+                        viewBox: "0 0 20 20",
+                        children: /* @__PURE__ */ jsx2(
+                          "path",
+                          {
+                            fillRule: "evenodd",
+                            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                            clipRule: "evenodd"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                option.value
+              ))
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value,
+          required
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/LoadingSpinner.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var sizeClasses = {
+  small: "h-4 w-4 border-2",
+  medium: "h-8 w-8 border-3",
+  large: "h-12 w-12 border-4"
+};
+var modeClasses = {
+  light: "border-zinc-200 border-t-zinc-800",
+  dark: "border-zinc-800 border-t-zinc-200"
+};
+function LoadingSpinner({
+  size = "medium",
+  mode = "dark"
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `${sizeClasses[size]} ${modeClasses[mode]} animate-spin rounded-full`
+    }
+  ) });
+}
+
+// src/components/Background.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Background({
+  className = "",
+  style = {}
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: `absolute inset-0 z-0 pointer-events-none flex items-center justify-center blur-3xl ${className}`,
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "absolute left-1/2 top-0 -translate-x-1/2 rotate-20 opacity-30",
+          style: {
+            width: "60rem",
+            aspectRatio: "1200/700",
+            background: "linear-gradient(to top right, #38bdf8, #1e40af)",
+            clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+            ...style
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  Background,
+  Button,
+  Dropdown,
+  LoadingSpinner
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Button.tsx", "../src/components/Dropdown.tsx", "../src/components/LoadingSpinner.tsx", "../src/components/Background.tsx"],
+  "sourcesContent": ["import React from 'react';\n\nconst variantClasses: Record<\n\t'light' | 'dark',\n\tRecord<'primary' | 'secondary' | 'success' | 'danger', string>\n> = {\n\tlight: {\n\t\tprimary:\n\t\t\t'bg-zinc-950 text-white hover:bg-zinc-800 focus-visible:outline-zinc-900',\n\t\tsecondary:\n\t\t\t'bg-zinc-200 text-zinc-900 hover:bg-zinc-300 focus-visible:outline-zinc-400',\n\t\tsuccess:\n\t\t\t'bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800',\n\t\tdanger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800'\n\t},\n\tdark: {\n\t\tprimary:\n\t\t\t'bg-zinc-50 text-zinc-950 hover:bg-zinc-200 focus-visible:outline-zinc-50',\n\t\tsecondary:\n\t\t\t'bg-zinc-800 text-zinc-50 hover:bg-zinc-700 focus-visible:outline-zinc-700',\n\t\tsuccess:\n\t\t\t'bg-green-600 text-white hover:bg-green-700 focus-visible:outline-green-800',\n\t\tdanger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-800'\n\t}\n};\n\nexport default function Button({\n\tvariant = 'primary',\n\tmode = 'dark',\n\thref,\n\tnewTab = false,\n\tclassName = '',\n\tstyle = {},\n\tchildren,\n\ttype = 'button',\n\tdisabled,\n\t...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tvariant?: 'primary' | 'secondary' | 'success' | 'danger';\n\tmode?: 'light' | 'dark';\n\thref?: string;\n\tnewTab?: boolean;\n}) {\n\tconst content = (\n\t\t<button\n\t\t\tclassName={`rounded-2xl px-6 py-3 text-sm font-semibold shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[mode][variant]} ${className}`}\n\t\t\tstyle={style}\n\t\t\ttype={type}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n\n\tif (href) {\n\t\treturn (\n\t\t\t<a\n\t\t\t\thref={href}\n\t\t\t\ttarget={newTab ? '_blank' : '_self'}\n\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\tclassName=\"contents\"\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn content;\n}\n", "import React, { useState, useRef, useEffect } from 'react';\r\n\r\ninterface DropdownProps {\r\n\tlabel?: string;\r\n\ticon?: React.ReactNode;\r\n\toptions: { label: string; value: string }[];\r\n\tvalue?: string;\r\n\tonChange?: (e: { target: { name: string; value: string } }) => void;\r\n\tname?: string;\r\n\tid?: string;\r\n\tclassName?: string;\r\n\trequired?: boolean;\r\n\tmode?: 'light' | 'dark';\r\n}\r\n\r\nconst triggerClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'bg-zinc-50 border-zinc-200 text-zinc-900 focus:ring-blue-500/20 focus:border-blue-500 focus:bg-white',\r\n\tdark: 'bg-zinc-900/50 border-zinc-800 text-zinc-50 focus:ring-zinc-700 focus:border-zinc-600 focus:bg-zinc-900'\r\n};\r\n\r\nconst chevronClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'text-zinc-400',\r\n\tdark: 'text-zinc-500'\r\n};\r\n\r\nconst dropdownListClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'bg-white border-zinc-200 shadow-xl',\r\n\tdark: 'bg-zinc-900 border-zinc-800 shadow-2xl backdrop-blur-xl'\r\n};\r\n\r\nconst optionClasses: Record<\r\n\t'light' | 'dark',\r\n\t{ selected: string; unselected: string; hover: string }\r\n> = {\r\n\tlight: {\r\n\t\tselected: 'text-blue-600 bg-blue-50/50',\r\n\t\tunselected: 'text-zinc-700',\r\n\t\thover: 'hover:bg-zinc-50'\r\n\t},\r\n\tdark: {\r\n\t\tselected: 'text-zinc-50 bg-zinc-800',\r\n\t\tunselected: 'text-zinc-400',\r\n\t\thover: 'hover:bg-zinc-800'\r\n\t}\r\n};\r\n\r\nconst iconClasses: Record<'light' | 'dark', string> = {\r\n\tlight: 'text-blue-500',\r\n\tdark: 'text-zinc-400'\r\n};\r\n\r\nexport default function Dropdown({\r\n\tlabel,\r\n\ticon,\r\n\toptions,\r\n\tvalue,\r\n\tonChange,\r\n\tname = '',\r\n\tid = '',\r\n\tclassName = '',\r\n\trequired = false,\r\n\tmode = 'dark'\r\n}: DropdownProps) {\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\r\n\r\n\tconst selectedOption = options.find(\r\n\t\t(opt) => String(opt.value).trim() === String(value).trim()\r\n\t);\r\n\tconst displayLabel = selectedOption\r\n\t\t? selectedOption.label\r\n\t\t: value\r\n\t\t\t? String(value).length > 20\r\n\t\t\t\t? `${String(value).substring(0, 8)}...${String(value).substring(String(value).length - 4)}`\r\n\t\t\t\t: String(value)\r\n\t\t\t: 'Select an option...';\r\n\r\n\tuseEffect(() => {\r\n\t\tconst handleClickOutside = (event: MouseEvent) => {\r\n\t\t\tif (\r\n\t\t\t\tdropdownRef.current &&\r\n\t\t\t\t!dropdownRef.current.contains(event.target as Node)\r\n\t\t\t) {\r\n\t\t\t\tsetIsOpen(false);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\r\n\t\treturn () =>\r\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\r\n\t}, []);\r\n\r\n\tconst handleSelect = (optionValue: string) => {\r\n\t\tif (onChange) {\r\n\t\t\tonChange({\r\n\t\t\t\ttarget: {\r\n\t\t\t\t\tname,\r\n\t\t\t\t\tvalue: optionValue\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\tsetIsOpen(false);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className={`space-y-1.5 ${className}`} ref={dropdownRef}>\r\n\t\t\t{label && (\r\n\t\t\t\t<label\r\n\t\t\t\t\thtmlFor={id || name}\r\n\t\t\t\t\tclassName=\"flex items-center text-xs font-bold uppercase tracking-wider text-zinc-500 ml-1 font-montserrat\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{icon && (\r\n\t\t\t\t\t\t<span className={`mr-2 ${iconClasses[mode]}`}>\r\n\t\t\t\t\t\t\t{icon}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t{label}\r\n\t\t\t\t</label>\r\n\t\t\t)}\r\n\t\t\t<div className=\"relative\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tonClick={() => setIsOpen(!isOpen)}\r\n\t\t\t\t\tclassName={`w-full px-4 py-3 border rounded-xl focus:ring-2 outline-none transition-colors font-montserrat cursor-pointer flex items-center justify-between text-left text-sm ${triggerClasses[mode]}`}\r\n\t\t\t\t\taria-haspopup=\"listbox\"\r\n\t\t\t\t\taria-expanded={isOpen}\r\n\t\t\t\t>\r\n\t\t\t\t\t<span className=\"truncate\">{displayLabel}</span>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`transition-transform duration-200 ${chevronClasses[mode]} ${isOpen ? 'rotate-180' : ''}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\tclassName=\"w-4 h-4\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\r\n\t\t\t\t\t\t\t\td=\"M19 9l-7 7-7-7\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</button>\r\n\r\n\t\t\t\t{isOpen && (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName={`absolute z-50 w-full mt-2 border rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 ${dropdownListClasses[mode]}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t\t\t\tclassName=\"py-1.5 px-1.5 max-h-60 overflow-y-auto\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{options.map((option) => (\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tkey={option.value}\r\n\t\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => handleSelect(option.value)}\r\n\t\t\t\t\t\t\t\t\tclassName={`w-full px-4 py-2.5 rounded-xl text-left font-montserrat transition-colors flex items-center justify-between text-sm ${optionClasses[mode].hover} ${\r\n\t\t\t\t\t\t\t\t\t\tString(option.value) === String(value)\r\n\t\t\t\t\t\t\t\t\t\t\t? optionClasses[mode].selected\r\n\t\t\t\t\t\t\t\t\t\t\t: optionClasses[mode].unselected\r\n\t\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\t\trole=\"option\"\r\n\t\t\t\t\t\t\t\t\taria-selected={\r\n\t\t\t\t\t\t\t\t\t\tString(option.value) === String(value)\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{option.label}\r\n\t\t\t\t\t\t\t\t\t{String(option.value) === String(value) && (\r\n\t\t\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-3.5 h-3.5\"\r\n\t\t\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\t\t\tviewBox=\"0 0 20 20\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t\t<input\r\n\t\t\t\t\ttype=\"hidden\"\r\n\t\t\t\t\tname={name}\r\n\t\t\t\t\tvalue={value}\r\n\t\t\t\t\trequired={required}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n", "import React from 'react';\n\nconst sizeClasses: Record<'small' | 'medium' | 'large', string> = {\n\tsmall: 'h-4 w-4 border-2',\n\tmedium: 'h-8 w-8 border-3',\n\tlarge: 'h-12 w-12 border-4'\n};\n\nconst modeClasses: Record<'light' | 'dark', string> = {\n\tlight: 'border-zinc-200 border-t-zinc-800',\n\tdark: 'border-zinc-800 border-t-zinc-200'\n};\n\nexport default function LoadingSpinner({\n\tsize = 'medium',\n\tmode = 'dark'\n}: {\n\tsize?: 'small' | 'medium' | 'large';\n\tmode?: 'light' | 'dark';\n}) {\n\treturn (\n\t\t<div className=\"flex items-center justify-center\">\n\t\t\t<div\n\t\t\t\tclassName={`${sizeClasses[size]} ${modeClasses[mode]} animate-spin rounded-full`}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n", "import React from 'react';\n\nexport default function Background({\n\tclassName = '',\n\tstyle = {}\n}: {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n}) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={`absolute inset-0 z-0 pointer-events-none flex items-center justify-center blur-3xl ${className}`}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"absolute left-1/2 top-0 -translate-x-1/2 rotate-20 opacity-30\"\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '60rem',\n\t\t\t\t\taspectRatio: '1200/700',\n\t\t\t\t\tbackground:\n\t\t\t\t\t\t'linear-gradient(to top right, #38bdf8, #1e40af)',\n\t\t\t\t\tclipPath:\n\t\t\t\t\t\t'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',\n\t\t\t\t\t...style\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsx", "jsx"]
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "cephie-ui",
+  "version": "1.0.0",
+  "description": "A React component library compatible with Next.js",
+  "license": "ISC",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "require": "./dist/components/*.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run src/build.ts && tsc -p tsconfig.build.json",
+    "dev": "bun run src/build.ts --watch",
+    "prepublishOnly": "bun run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cephie-studios/ui.git"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "nextjs"
+  ],
+  "author": "Cephie Studios",
+  "bugs": {
+    "url": "https://github.com/cephie-studios/ui/issues"
+  },
+  "homepage": "https://github.com/cephie-studios/ui#readme",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "esbuild": "^0.27.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "latest"
+  },
+  "dependencies": {
+    "path": "^0.12.7",
+    "url": "^0.11.4"
+  }
+}