@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/ui/components/BulkActionBar.style.css

@@ -0,0 +1,196 @@
+.appkit-bulk-bar {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid rgba(80, 156, 2, 0.2);
+  animation: appkit-slide-in 150ms ease;
+}
+
+@keyframes appkit-slide-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.appkit-bulk-bar__stripe {
+  height: 3px;
+  width: 100%;
+  background: linear-gradient(90deg, #3e7708, #509c02, #3e7708);
+}
+
+.appkit-bulk-bar__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* count pill */
+.appkit-bulk-bar__count-pill {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  min-height: 0 !important;
+  height: 2rem;
+  padding: 0 0.75rem 0 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid rgba(80, 156, 2, 0.3);
+  background: rgba(80, 156, 2, 0.07);
+  color: #3e7708;
+  transition: background-color 0.15s ease;
+}
+
+.appkit-bulk-bar__count-pill:hover {
+  background: rgba(80, 156, 2, 0.14);
+}
+
+.appkit-bulk-bar__count-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.appkit-bulk-bar__count-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* picker trigger */
+.appkit-bulk-bar__picker-trigger {
+  flex: 1;
+  min-width: 0;
+  height: 2.5rem;
+  display: flex !important;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: #fafafa;
+  color: #18181b;
+  transition: background-color 0.15s ease;
+}
+
+.appkit-bulk-bar__picker-trigger:hover { background: #f4f4f5; }
+.appkit-bulk-bar__picker-trigger--danger { color: #be123c; }
+
+.appkit-bulk-bar__picker-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-bulk-bar__picker-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  line-height: 1;
+}
+
+.appkit-bulk-bar__picker-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: #a1a1aa;
+}
+
+/* apply button */
+.appkit-bulk-bar__apply {
+  flex-shrink: 0;
+  height: 2.5rem;
+}
+
+/* dropdown */
+.appkit-bulk-bar__dropdown {
+  overflow: hidden;
+  border-top: 1px solid rgba(228, 228, 231, 0.8);
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+
+.appkit-bulk-bar__dropdown--open {
+  max-height: 16rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* dropdown options */
+.appkit-bulk-bar__option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: #3f3f46;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.appkit-bulk-bar__option:hover { background: #fafafa; }
+.appkit-bulk-bar__option--danger { color: #be123c; }
+.appkit-bulk-bar__option--selected { background: #fafafa; font-weight: 500; }
+.appkit-bulk-bar__option--disabled { opacity: 0.4; cursor: not-allowed; }
+
+.appkit-bulk-bar__option-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-bulk-bar__option-label { flex: 1; }
+
+/* dark */
+.dark .appkit-bulk-bar {
+  border-color: rgba(233, 30, 140, 0.3);
+}
+
+.dark .appkit-bulk-bar__stripe {
+  background: linear-gradient(90deg, #be185d, #e91e8c, #be185d);
+}
+
+.dark .appkit-bulk-bar__count-pill {
+  border-color: rgba(233, 30, 140, 0.35);
+  background: rgba(233, 30, 140, 0.1);
+  color: #f9a8d4;
+}
+
+.dark .appkit-bulk-bar__count-pill:hover {
+  background: rgba(233, 30, 140, 0.18);
+}
+
+.dark .appkit-bulk-bar__picker-trigger {
+  border-color: #334155;
+  background: rgba(30, 41, 59, 0.6);
+  color: #f1f5f9;
+}
+
+.dark .appkit-bulk-bar__picker-trigger:hover { background: rgba(51, 65, 85, 0.6); }
+.dark .appkit-bulk-bar__picker-trigger--danger { color: #fda4af; }
+
+.dark .appkit-bulk-bar__dropdown {
+  border-top-color: rgba(51, 65, 85, 0.8);
+}
+
+.dark .appkit-bulk-bar__option { color: #e2e8f0; }
+.dark .appkit-bulk-bar__option:hover { background: rgba(30, 41, 59, 0.6); }
+.dark .appkit-bulk-bar__option--danger { color: #fda4af; }
+.dark .appkit-bulk-bar__option--selected { background: rgba(30, 41, 59, 0.6); }

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

@@ -0,0 +1,31 @@
+import React from "react";
+/**
+ * Button — versatile button with multiple variants, sizes, and loading state.
+ *
+ * Extracted from src/components/ui/Button.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.button and THEME_CONSTANTS.colors.button.
+ */
+declare const UI_BUTTON: {
+    readonly base: "appkit-button";
+    readonly variants: {
+        readonly primary: "appkit-button--primary";
+        readonly secondary: "appkit-button--secondary";
+        readonly outline: "appkit-button--outline";
+        readonly ghost: "appkit-button--ghost";
+        readonly danger: "appkit-button--danger";
+        readonly warning: "appkit-button--warning";
+    };
+    readonly sizes: {
+        readonly sm: "appkit-button--sm";
+        readonly md: "appkit-button--md";
+        readonly lg: "appkit-button--lg";
+    };
+};
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof UI_BUTTON.variants;
+    size?: keyof typeof UI_BUTTON.sizes;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+}
+export declare function Button({ variant, size, className, isLoading, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Button.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import { Loader2 } from "lucide-react";
+/**
+ * Button — versatile button with multiple variants, sizes, and loading state.
+ *
+ * Extracted from src/components/ui/Button.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.button and THEME_CONSTANTS.colors.button.
+ */
+// Inlined from THEME_CONSTANTS
+const UI_BUTTON = {
+    base: "appkit-button",
+    variants: {
+        primary: "appkit-button--primary",
+        secondary: "appkit-button--secondary",
+        outline: "appkit-button--outline",
+        ghost: "appkit-button--ghost",
+        danger: "appkit-button--danger",
+        warning: "appkit-button--warning",
+    },
+    sizes: {
+        sm: "appkit-button--sm",
+        md: "appkit-button--md",
+        lg: "appkit-button--lg",
+    },
+};
+export function Button({ variant = "primary", size = "md", className = "", isLoading = false, disabled, children, ...props }) {
+    return (_jsxs("button", { className: twMerge(UI_BUTTON.base, UI_BUTTON.variants[variant], UI_BUTTON.sizes[size], className), disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
+}

package/dist/ui/components/Button.style.css

@@ -0,0 +1,160 @@
+.appkit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 44px;
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  user-select: none;
+}
+
+.appkit-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.appkit-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.appkit-button--sm {
+  min-height: 36px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+}
+
+.appkit-button--md {
+  min-height: 44px;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+.appkit-button--lg {
+  min-height: 44px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+  gap: 0.625rem;
+}
+
+.appkit-button--primary {
+  background: #3e7708;
+  color: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.appkit-button--primary:hover:not(:disabled) {
+  background: #2f5a06;
+}
+
+.dark .appkit-button--primary {
+  background: #e91e8c;
+}
+
+.dark .appkit-button--primary:hover:not(:disabled) {
+  background: #f063b9;
+}
+
+.appkit-button--secondary {
+  background: #3e7708;
+  color: #ffffff;
+}
+
+.appkit-button--secondary:hover:not(:disabled) {
+  background: #509c02;
+}
+
+.dark .appkit-button--secondary {
+  background: #b00d66;
+}
+
+.dark .appkit-button--secondary:hover:not(:disabled) {
+  background: #d4107a;
+}
+
+.appkit-button--outline {
+  background: #ffffff;
+  border-color: #e4e4e7;
+  color: #18181b;
+}
+
+.appkit-button--outline:hover:not(:disabled) {
+  background: #fafafa;
+}
+
+.dark .appkit-button--outline {
+  background: transparent;
+  border-color: #334155;
+  color: #f8fafc;
+}
+
+.dark .appkit-button--outline:hover:not(:disabled) {
+  background: #1e293b;
+}
+
+.appkit-button--ghost {
+  background: transparent;
+  color: #3f3f46;
+}
+
+.appkit-button--ghost:hover:not(:disabled) {
+  background: #f4f4f5;
+}
+
+.dark .appkit-button--ghost {
+  color: #cbd5e1;
+}
+
+.dark .appkit-button--ghost:hover:not(:disabled) {
+  background: #1e293b;
+}
+
+.appkit-button--danger {
+  background: #dc2626;
+  color: #ffffff;
+}
+
+.appkit-button--danger:hover:not(:disabled) {
+  background: #ef4444;
+}
+
+.appkit-button--warning {
+  background: #f59e0b;
+  color: #ffffff;
+}
+
+.appkit-button--warning:hover:not(:disabled) {
+  background: #fbbf24;
+}
+
+.appkit-button__spinner {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  animation: appkit-spin 1s linear infinite;
+}
+
+.appkit-button__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.appkit-button__content--loading {
+  opacity: 0.7;
+}
+
+@keyframes appkit-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+type CardVariant = "flat" | "outlined" | "elevated" | "default" | "primary" | "bordered" | "interactive" | "glass" | "gradient-indigo" | "gradient-teal" | "gradient-amber" | "gradient-rose" | "stat-indigo" | "stat-teal" | "stat-amber" | "stat-rose" | "stat-emerald";
+type CardPadding = "none" | "sm" | "md" | "lg";
+export interface CardProps {
+    children: React.ReactNode;
+    variant?: CardVariant;
+    padding?: CardPadding;
+    hover?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare function Card({ children, variant, padding, hover, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardSectionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function CardHeader({ children, className }: CardSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardBody({ children, className }: CardSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ children, className }: CardSectionProps): import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/ui/components/Card.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const UI_CARD = {
+    base: "appkit-card",
+    variants: {
+        flat: "appkit-card--flat",
+        default: "appkit-card--default",
+        primary: "appkit-card--primary",
+        outlined: "appkit-card--outlined",
+        bordered: "appkit-card--bordered",
+        elevated: "appkit-card--elevated",
+        interactive: "appkit-card--interactive",
+        glass: "appkit-card--glass",
+        "gradient-indigo": "appkit-card--gradient-indigo",
+        "gradient-teal": "appkit-card--gradient-teal",
+        "gradient-amber": "appkit-card--gradient-amber",
+        "gradient-rose": "appkit-card--gradient-rose",
+        "stat-indigo": "appkit-card--stat-indigo",
+        "stat-teal": "appkit-card--stat-teal",
+        "stat-amber": "appkit-card--stat-amber",
+        "stat-rose": "appkit-card--stat-rose",
+        "stat-emerald": "appkit-card--stat-emerald",
+    },
+    padding: {
+        none: "",
+        sm: "appkit-card--pad-sm",
+        md: "appkit-card--pad-md",
+        lg: "appkit-card--pad-lg",
+    },
+};
+export function Card({ children, variant = "flat", padding = "md", hover = false, className = "", style, onClick, }) {
+    return (_jsx("div", { className: [
+            UI_CARD.base,
+            UI_CARD.variants[variant],
+            UI_CARD.padding[padding],
+            hover ? "appkit-card--hoverable" : "",
+            onClick ? "appkit-card--clickable" : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
+}
+export function CardHeader({ children, className = "" }) {
+    return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));
+}
+export function CardBody({ children, className = "" }) {
+    return _jsx("div", { className: className, "data-section": "card-div-465", children: children });
+}
+export function CardFooter({ children, className = "" }) {
+    return (_jsx("div", { className: ["appkit-card__footer", className].filter(Boolean).join(" "), "data-section": "card-div-466", children: children }));
+}
+export default Card;

package/dist/ui/components/Card.style.css

@@ -0,0 +1,192 @@
+/* Card — surface container with variant, padding, and section sub-components */
+
+.appkit-card {
+  border-radius: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+/* Variants */
+.appkit-card--flat {
+  background: white;
+}
+.appkit-card--default {
+  background: white;
+}
+.appkit-card--primary {
+  background: var(--color-primary);
+  color: var(--color-primary-foreground, white);
+}
+.appkit-card--outlined {
+  background: white;
+  border: 1px solid #e4e4e7;
+}
+.appkit-card--bordered {
+  background: white;
+  border: 2px solid #e4e4e7;
+}
+.appkit-card--elevated {
+  background: white;
+  box-shadow: 0 4px 6px -1px rgba(228, 228, 231, 0.5);
+}
+.appkit-card--interactive {
+  background: white;
+  border: 1px solid #e4e4e7;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.appkit-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+.appkit-card--glass {
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(8px);
+}
+
+/* Gradient variants */
+.appkit-card--gradient-indigo {
+  background: linear-gradient(to bottom right, #6366f1, #4f46e5);
+  color: white;
+}
+.appkit-card--gradient-teal {
+  background: linear-gradient(to bottom right, #14b8a6, #0891b2);
+  color: white;
+}
+.appkit-card--gradient-amber {
+  background: linear-gradient(to bottom right, #f59e0b, #ea580c);
+  color: white;
+}
+.appkit-card--gradient-rose {
+  background: linear-gradient(to bottom right, #f43f5e, #ec4899);
+  color: white;
+}
+
+/* Stat variants */
+.appkit-card--stat-indigo {
+  background: #eef2ff;
+  color: #312e81;
+  border: 1px solid #c7d2fe;
+}
+.appkit-card--stat-teal {
+  background: #f0fdfa;
+  color: #134e4a;
+  border: 1px solid #99f6e4;
+}
+.appkit-card--stat-amber {
+  background: #fffbeb;
+  color: #78350f;
+  border: 1px solid #fde68a;
+}
+.appkit-card--stat-rose {
+  background: #fff1f2;
+  color: #881337;
+  border: 1px solid #fecdd3;
+}
+.appkit-card--stat-emerald {
+  background: #ecfdf5;
+  color: #064e3b;
+  border: 1px solid #a7f3d0;
+}
+
+/* Padding */
+.appkit-card--pad-sm {
+  padding: 0.75rem;
+}
+.appkit-card--pad-md {
+  padding: 1rem;
+}
+@media (min-width: 640px) {
+  .appkit-card--pad-md {
+    padding: 1.25rem;
+  }
+}
+.appkit-card--pad-lg {
+  padding: 1.5rem;
+}
+@media (min-width: 640px) {
+  .appkit-card--pad-lg {
+    padding: 1.75rem;
+  }
+}
+
+/* Hover */
+.appkit-card--hoverable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Clickable */
+.appkit-card--clickable {
+  cursor: pointer;
+}
+
+/* Sections */
+.appkit-card__header {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.appkit-card__footer {
+  padding-top: 1rem;
+  border-top: 1px solid #e4e4e7;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .appkit-card--flat,
+  .appkit-card--default {
+    background: #0f172a;
+  }
+  .appkit-card--outlined {
+    background: #0f172a;
+    border-color: #334155;
+  }
+  .appkit-card--bordered {
+    background: #0f172a;
+    border-color: #334155;
+  }
+  .appkit-card--elevated {
+    background: #0f172a;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  }
+  .appkit-card--interactive {
+    background: #0f172a;
+    border-color: #334155;
+  }
+  .appkit-card--glass {
+    border-color: rgba(51, 65, 85, 0.4);
+    background: rgba(15, 23, 42, 0.75);
+  }
+  .appkit-card--stat-indigo {
+    background: rgba(49, 46, 129, 0.4);
+    color: #c7d2fe;
+    border-color: rgba(99, 102, 241, 0.6);
+  }
+  .appkit-card--stat-teal {
+    background: rgba(19, 78, 74, 0.4);
+    color: #99f6e4;
+    border-color: rgba(20, 184, 166, 0.6);
+  }
+  .appkit-card--stat-amber {
+    background: rgba(120, 53, 15, 0.4);
+    color: #fde68a;
+    border-color: rgba(245, 158, 11, 0.6);
+  }
+  .appkit-card--stat-rose {
+    background: rgba(136, 19, 55, 0.4);
+    color: #fecdd3;
+    border-color: rgba(244, 63, 94, 0.6);
+  }
+  .appkit-card--stat-emerald {
+    background: rgba(6, 78, 59, 0.4);
+    color: #a7f3d0;
+    border-color: rgba(16, 185, 129, 0.6);
+  }
+  .appkit-card__header {
+    border-bottom-color: #334155;
+  }
+  .appkit-card__footer {
+    border-top-color: #334155;
+  }
+}

package/dist/ui/components/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    error?: React.ReactNode;
+    indeterminate?: boolean;
+}
+export declare function Checkbox({ label, suffix, error, indeterminate, className, checked, disabled, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;