@kawaiininja/ui 1.0.3

package/README.md

@@ -0,0 +1,49 @@
+# @kawaiininja/ui
+
+A premium React UI component library for building beautiful web applications.
+
+## Component Structure
+
+```
+ui/
+├── dist/                # Compiled output
+└── src/
+    └── components/
+        └── section/     # Section layout components
+            ├── Section.tsx
+            ├── SectionHeader.tsx
+            └── SectionLabel.tsx
+```
+
+## Installation
+
+```bash
+npm install @kawaiininja/ui
+```
+
+## Usage
+
+```tsx
+import { Section, SectionHeader, SectionLabel } from "@kawaiininja/ui";
+
+function MyPage() {
+  return (
+    <Section space="lg">
+      <SectionHeader title="My Section" subtitle="This is a subtitle" />
+      <SectionLabel>Label</SectionLabel>
+      <div>Content goes here...</div>
+    </Section>
+  );
+}
+```
+
+## Features
+
+- **TypeScript Support**: Fully typed components.
+- **Modern Design**: Built for premium user interfaces.
+- **Flexible**: customizable props and styling.
+
+## Scripts
+
+- `npm run build`: Build the package (TypeScript compilation).
+- `npm publish`: Publish to npm (use the provided `publish-ui-*.bat` scripts in the root).

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

@@ -0,0 +1,22 @@
+import React from "react";
+/**
+ * Props for the Card component
+ */
+interface CardProps {
+    /** The content to render inside the card */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional ID for navigation */
+    id?: string;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional title for the card */
+    title?: string;
+}
+/**
+ * A container component for grouping related content.
+ * Renders an aside element with default styling for background, border, and padding.
+ */
+export declare function Card({ children, className, id, "aria-label": ariaLabel, title, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/card/Card.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A container component for grouping related content.
+ * Renders an aside element with default styling for background, border, and padding.
+ */
+export function Card({ children, className = "", id, "aria-label": ariaLabel, title, }) {
+    return (_jsxs("aside", { id: id, "aria-label": ariaLabel, className: `
+        rounded-lg
+        border border-slate-700
+        bg-slate-800
+        p-4
+        ${className}
+      `, children: [title && (_jsx("h3", { className: "mb-4 text-sm font-semibold text-white uppercase tracking-widest", children: title })), children] }));
+}

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

@@ -0,0 +1 @@
+export * from "./Card";

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export * from "./Card";

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./card";
+export * from "./label";
+export * from "./page";
+export * from "./section";
+export * from "./settings";
+export * from "./toggle";

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export * from "./card";
+export * from "./label";
+export * from "./page";
+export * from "./section";
+export * from "./settings";
+export * from "./toggle";

package/dist/components/label/Label.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * Props for the Label component
+ */
+interface LabelProps {
+    /**
+     * The HTML element to render as
+     * @default "p"
+     */
+    as?: React.ElementType;
+    /** The content of the label */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A consistent label component generally used for subsections or small headers within a card.
+ * Applies uppercase, bold, and tracking styles.
+ */
+export declare function Label({ as: Tag, children, className }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/label/Label.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A consistent label component generally used for subsections or small headers within a card.
+ * Applies uppercase, bold, and tracking styles.
+ */
+export function Label({ as: Tag = "p", children, className = "" }) {
+    return (_jsx(Tag, { className: `
+        text-xs
+        font-bold
+        uppercase
+        tracking-widest
+        text-muted
+        mb-2.5 ml-1
+        ${className}
+      `, children: children }));
+}

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

@@ -0,0 +1 @@
+export * from "./Label";

package/dist/components/label/index.js

@@ -0,0 +1 @@
+export * from "./Label";

package/dist/components/page/Page.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ * Props for the Page component
+ */
+interface PageProps {
+    /** The content to render inside the page */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A top-level container component for a page.
+ * Renders a main element to semantically identify the main content of the document.
+ */
+export declare function Page({ children, className }: PageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/page/Page.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A top-level container component for a page.
+ * Renders a main element to semantically identify the main content of the document.
+ */
+export function Page({ children, className = "" }) {
+    return (_jsx("main", { className: `flex min-h-screen flex-col p-6 ${className}`, children: children }));
+}

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

@@ -0,0 +1 @@
+export * from "./Page";

package/dist/components/page/index.js

@@ -0,0 +1 @@
+export * from "./Page";

package/dist/components/section/Section.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+/**
+ * Props for the Section component
+ */
+interface SectionProps {
+    /** The content to render inside the section */
+    children: React.ReactNode;
+    /**
+     * Vertical spacing between children
+     * @default "md"
+     */
+    space?: "sm" | "md" | "lg";
+    /** Optional ID for navigation */
+    id?: string;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A container component that applies consistent vertical spacing between its children.
+ * Useful for grouping related content with uniform gaps.
+ */
+export declare function Section({ children, space, id, "aria-label": ariaLabel, className, }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/section/Section.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A container component that applies consistent vertical spacing between its children.
+ * Useful for grouping related content with uniform gaps.
+ */
+export function Section({ children, space = "md", id, "aria-label": ariaLabel, className = "", }) {
+    const gaps = {
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+    };
+    return (_jsx("section", { id: id, "aria-label": ariaLabel, className: `flex flex-col ${gaps[space]} ${className}`, children: children }));
+}

package/dist/components/section/SectionHeader.d.ts

@@ -0,0 +1,25 @@
+type HeadingTag = "h2" | "h3" | "h4";
+/**
+ * Props for the SectionHeader component
+ */
+interface SectionHeaderProps {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text to display below the title */
+    subtitle?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * The semantic heading tag to use for the title.
+     * - Use `h2` for main section titles.
+     * - Use `h3` for nested subsections.
+     * @default "h2"
+     */
+    as?: HeadingTag;
+}
+/**
+ * A header component designed for sections, featuring a primary title and an optional subtitle.
+ * Uses consistent uppercase text styling.
+ */
+export declare function SectionHeader({ title, subtitle, className, as: Tag, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/section/SectionHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A header component designed for sections, featuring a primary title and an optional subtitle.
+ * Uses consistent uppercase text styling.
+ */
+export function SectionHeader({ title, subtitle, className = "", as: Tag = "h2", }) {
+    return (_jsxs("header", { className: `flex flex-col gap-1 ${className}`, children: [_jsx(Tag, { className: "text-md font-bold uppercase tracking-widest text-primary", children: title }), subtitle && (_jsx("p", { className: "text-sm uppercase tracking-widest leading-snug text-muted", children: subtitle }))] }));
+}

package/dist/components/section/SectionLabel.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * Props for the SectionLabel component
+ */
+interface SectionLabelProps {
+    /**
+     * The HTML element to render as
+     * @default "p"
+     */
+    as?: React.ElementType;
+    /** The content of the label */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A consistent label component generally used for subsections or small headers within a card.
+ * Applies uppercase, bold, and tracking styles.
+ */
+export declare function SectionLabel({ as: Tag, children, className, }: SectionLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/section/SectionLabel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A consistent label component generally used for subsections or small headers within a card.
+ * Applies uppercase, bold, and tracking styles.
+ */
+export function SectionLabel({ as: Tag = "p", children, className = "", }) {
+    return (_jsx(Tag, { className: `
+        text-xs
+        font-bold
+        uppercase
+        tracking-widest
+        text-muted
+        mb-2.5 ml-1
+        ${className}
+      `, children: children }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./Section";
+export * from "./SectionHeader";

package/dist/components/section/index.js

@@ -0,0 +1,2 @@
+export * from "./Section";
+export * from "./SectionHeader";

package/dist/components/settings/SettingRow.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface SettingRowProps {
+    /** Lucide icon component to display */
+    icon: React.ComponentType<{
+        size?: number | string;
+        className?: string;
+    }>;
+    /** Primary label text */
+    label: string;
+    /** Optional secondary description text */
+    description?: string;
+    /** Right-aligned content (e.g. Toggle, Chevron) */
+    children?: React.ReactNode;
+    /** Optional click handler for the row */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A standard row for settings interfaces, featuring an icon, label, description, and action area.
+ */
+export declare const SettingRow: React.FC<SettingRowProps>;
+export {};

package/dist/components/settings/SettingRow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A standard row for settings interfaces, featuring an icon, label, description, and action area.
+ */
+export const SettingRow = ({ icon: Icon, label, description, children, onClick, className = "", }) => (_jsxs("div", { onClick: onClick, className: `flex items-center justify-between p-4 border-b border-zinc-800 last:border-0 hover:bg-zinc-800/30 transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "p-2 bg-zinc-800 rounded-lg text-blue-500", children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("p", { className: "text-zinc-100 font-medium", children: label }), description && _jsx("p", { className: "text-zinc-500 text-xs", children: description })] })] }), _jsx("div", { className: "flex items-center", children: children })] }));

package/dist/components/settings/SettingsSection.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface SettingsSectionProps {
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * A container for grouping related setting rows with a labeled header.
+ */
+export declare const SettingsSection: React.FC<SettingsSectionProps>;
+export {};

package/dist/components/settings/SettingsSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A container for grouping related setting rows with a labeled header.
+ */
+export const SettingsSection = ({ title, children, className = "", }) => (_jsxs("div", { className: `mb-8 ${className}`, children: [_jsx("h3", { className: "text-blue-500 font-bold text-sm uppercase tracking-widest mb-4 px-2", children: title }), _jsx("div", { className: "bg-zinc-900/50 border border-zinc-800 rounded-2xl overflow-hidden", children: children })] }));

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

@@ -0,0 +1,2 @@
+export * from "./SettingRow";
+export * from "./SettingsSection";

package/dist/components/settings/index.js

@@ -0,0 +1,2 @@
+export * from "./SettingRow";
+export * from "./SettingsSection";

package/dist/components/toggle/BloomToggle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ToggleProps {
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+    className?: string;
+}
+/**
+ * A minimalist toggle with a circular "bloom" animation effect.
+ */
+export declare const BloomToggle: React.FC<ToggleProps>;
+export {};

package/dist/components/toggle/BloomToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A minimalist toggle with a circular "bloom" animation effect.
+ */
+export const BloomToggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center ${className}`, children: [_jsx("div", { className: `absolute inset-0 rounded-full transition-all duration-700 ${enabled
+                ? "bg-[#FF8A1F]/20 scale-100 opacity-100"
+                : "bg-transparent scale-0 opacity-0"}` }), _jsx("div", { className: `w-4 h-4 rounded-full border-2 transition-all duration-500 ${enabled
+                ? "bg-[#FF8A1F] border-transparent scale-125"
+                : "bg-transparent border-blue-500 scale-100"}` })] }));

package/dist/components/toggle/CrosshairToggle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ToggleProps {
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+    className?: string;
+}
+/**
+ * A unique crosshair-style toggle with tactical UI elements and corner indicators.
+ */
+export declare const CrosshairToggle: React.FC<ToggleProps>;
+export {};

package/dist/components/toggle/CrosshairToggle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A unique crosshair-style toggle with tactical UI elements and corner indicators.
+ */
+export const CrosshairToggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center group ${className}`, children: [_jsx("div", { className: `absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 transition-all duration-300 ${enabled
+                ? "border-[#FF8A1F] translate-x-2 translate-y-2"
+                : "border-blue-500/30"}` }), _jsx("div", { className: `absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 transition-all duration-300 ${enabled
+                ? "border-[#FF8A1F] -translate-x-2 translate-y-2"
+                : "border-blue-500/30"}` }), _jsx("div", { className: `absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 transition-all duration-300 ${enabled
+                ? "border-[#FF8A1F] translate-x-2 -translate-y-2"
+                : "border-blue-500/30"}` }), _jsx("div", { className: `absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 transition-all duration-300 ${enabled
+                ? "border-[#FF8A1F] -translate-x-2 -translate-y-2"
+                : "border-blue-500/30"}` }), _jsx("div", { className: `w-1 h-1 rounded-full transition-all duration-300 ${enabled
+                ? "bg-[#FF8A1F] scale-[3] shadow-[0_0_10px_#FF8A1F]"
+                : "bg-blue-500/20 scale-100"}` })] }));

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ToggleProps {
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+    className?: string;
+}
+/**
+ * A sleek, modern toggle switch with a sliding indicator and subtle glow effects.
+ */
+export declare const Toggle: React.FC<ToggleProps>;
+export {};

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A sleek, modern toggle switch with a sliding indicator and subtle glow effects.
+ */
+export const Toggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-14 h-6 border transition-all duration-300 overflow-hidden ${enabled ? "border-[#FF8A1F]" : "border-blue-500/30"} ${className}`, children: [_jsx("div", { className: `absolute inset-y-0 left-0 transition-all duration-500 bg-[#FF8A1F]/20 ${enabled ? "w-full" : "w-0"}` }), _jsx("div", { className: `absolute top-0 bottom-0 w-4 transition-all duration-300 flex items-center justify-center ${enabled
+                ? "left-10 bg-[#FF8A1F] shadow-[-4px_0_12px_#FF8A1F]"
+                : "left-0 bg-blue-500"}`, children: _jsx("div", { className: "w-[1px] h-3 bg-black/30" }) })] }));

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

@@ -0,0 +1,3 @@
+export * from "./BloomToggle";
+export * from "./CrosshairToggle";
+export * from "./Toggle";

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+export * from "./BloomToggle";
+export * from "./CrosshairToggle";
+export * from "./Toggle";

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@kawaiininja/ui",
+    "version": "1.0.3",
+    "description": "A modern React component library with 45+ premium components for building beautiful web applications",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./dist/index.js"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "echo 'Publishing @kawaiininja/ui to npm...'"
+    },
+    "keywords": [
+        "react",
+        "components",
+        "ui",
+        "framework",
+        "onyx",
+        "kawaiininja",
+        "design-system",
+        "dashboard",
+        "admin",
+        "charts",
+        "notifications",
+        "dark-mode",
+        "modern-ui"
+    ],
+    "author": "Vinay (4kawaiininja)",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/4kawaiininja/onyx-framework.git"
+    },
+    "bugs": {
+        "url": "https://github.com/4kawaiininja/onyx-framework/issues"
+    },
+    "homepage": "https://github.com/4kawaiininja/onyx-framework#readme",
+    "peerDependencies": {
+        "lucide-react": ">=0.263.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "recharts": "^2.0.0"
+    },
+    "peerDependenciesMeta": {
+        "recharts": {
+            "optional": true
+        },
+        "lucide-react": {
+            "optional": true
+        }
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "typescript": "^5.9.3"
+    }
+}