cynx-ui 1.2.16 → 1.2.18

package/components/Button.jsx

@@ -1,159 +1,159 @@
-import { Spinner } from './Spinner';
-
-const VARIANTS = {
-  default: {
-    background: '#fff',
-    color: 'var(--def-btn-text,#0f111c)',
-    border: '1px solid var(--bd,#d7d8e0)',
-    hoverBg: 'var(--grey-1,#f5f5f8)',
-    hoverBorder: 'var(--grey-2,#ebebee)',
-  },
-  primary: {
-    background: 'var(--accent,#f99e2c)',
-    color: '#fff',
-    border: '1px solid transparent',
-    hoverBg: 'var(--accent-hover,#e68d1f)',
-    hoverShadow: '0 2px 8px rgba(249,158,44,.35)',
-  },
-  secondary: {
-    background: 'var(--blue-bg,rgba(39,130,228,.1))',
-    color: 'var(--blue,#2782e4)',
-    border: '1px solid rgba(39,130,228,.2)',
-    hoverBg: 'rgba(39,130,228,.18)',
-    hoverShadow: '0 2px 8px rgba(39,130,228,.25)',
-  },
-  danger: {
-    background: 'var(--danger-bg,rgba(246,71,71,.1))',
-    color: 'var(--danger,#f64747)',
-    border: '1px solid rgba(246,71,71,.2)',
-    hoverBg: 'rgba(246,71,71,.18)',
-    hoverShadow: '0 2px 8px rgba(246,71,71,.25)',
-  },
-  success: {
-    background: 'var(--success-bg,rgba(39,174,96,.1))',
-    color: 'var(--success,#27ae60)',
-    border: '1px solid rgba(39,174,96,.2)',
-    hoverBg: 'rgba(39,174,96,.18)',
-    hoverShadow: '0 2px 8px rgba(39,174,96,.25)',
-  },
-  warning: {
-    background: 'var(--accent-bg,rgba(249,158,44,.1))',
-    color: 'var(--accent,#f99e2c)',
-    border: '1px solid var(--accent-border,rgba(249,158,44,.25))',
-    hoverBg: 'rgba(249,158,44,.18)',
-    hoverShadow: '0 2px 8px rgba(249,158,44,.25)',
-  },
-  ghost: {
-    background: 'transparent',
-    color: 'var(--t2,#797b8d)',
-    border: '1px solid var(--bd,#d7d8e0)',
-    hoverColor: 'var(--t1,#1a1a2e)',
-    hoverBg: 'var(--grey-1,#f5f5f8)',
-    hoverBorder: 'var(--grey-2,#ebebee)',
-  },
-  outline: {
-    background: 'transparent',
-    color: 'var(--accent,#f99e2c)',
-    border: '1px solid var(--accent,#f99e2c)',
-    hoverBg: 'var(--accent-bg,rgba(249,158,44,.1))',
-  },
-  link: {
-    background: 'transparent',
-    color: 'var(--accent,#f99e2c)',
-    border: '1px solid transparent',
-    paddingLeft: 4,
-    paddingRight: 4,
-    boxShadow: 'none',
-    hoverTextDec: 'underline',
-  },
-  'no-line': {
-    background: 'none',
-    border: 'none',
-    boxShadow: 'none',
-    color: 'var(--t3,#8a96b0)',
-    paddingLeft: 14,
-    paddingRight: 14,
-    borderRadius: 'var(--rmd,8px)',
-    hoverColor: 'var(--p,var(--accent,#f99e2c))',
-    hoverBg: 'var(--pd,var(--accent-bg,rgba(249,158,44,.1)))',
-  },
-};
-
-const SIZES = {
-  xs: { padding: '4px 8px', fontSize: 12, height: 28 },
-  sm: { padding: '4px 8px', fontSize: 12, height: 32 },
-  md: { padding: '8px 16px', fontSize: 13, height: 38 },
-  lg: { padding: '10px 20px', fontSize: 14, height: 44 },
-};
-
-const ICON_STYLE = {
-  padding: 0,
-  width: 30,
-  height: 30,
-  borderRadius: 'var(--rads,8px)',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  lineHeight: 0,
-};
-
-export default function Button({
-  children,
-  variant = 'default',
-  size = 'md',
-  icon = null,
-  iconRight = null,
-  disabled = false,
-  loading = false,
-  onClick = null,
-  style = {},
-  className = '',
-  ...props
-}) {
-  const v = VARIANTS[variant] || VARIANTS.default;
-  const s = SIZES[size] || SIZES.md;
-
-  const isIconOnly = variant === 'icon';
-
-  return (
-    <button
-      className={className}
-      disabled={disabled || loading}
-      onClick={onClick}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 6,
-        borderRadius: 'var(--rads,8px)',
-        fontFamily: 'var(--f,var(--sans,inherit))',
-        fontWeight: 500,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        whiteSpace: 'nowrap',
-        transition: 'all .14s',
-        letterSpacing: '-.01em',
-        outline: 'none',
-        boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
-        opacity: disabled ? 0.45 : 1,
-        pointerEvents: disabled ? 'none' : undefined,
-        background: v.background,
-        color: v.color,
-        border: v.border,
-        padding: isIconOnly ? 0 : s.padding,
-        fontSize: s.fontSize,
-        height: isIconOnly ? 30 : s.height,
-        width: isIconOnly ? 30 : undefined,
-        ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
-        ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
-        ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
-        ...style,
-      }}
-      {...props}
-    >
-      {loading && <Spinner size={14} inline color="currentColor" />}
-      {!loading && icon && icon}
-      {!loading && children}
-      {!loading && iconRight && iconRight}
-    </button>
-  );
-}
+import { Spinner } from './Spinner';
+
+const VARIANTS = {
+  default: {
+    background: '#fff',
+    color: 'var(--def-btn-text,#0f111c)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  primary: {
+    background: 'var(--accent,#f99e2c)',
+    color: '#fff',
+    border: '1px solid transparent',
+    hoverBg: 'var(--accent-hover,#e68d1f)',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.35)',
+  },
+  secondary: {
+    background: 'var(--blue-bg,rgba(39,130,228,.1))',
+    color: 'var(--blue,#2782e4)',
+    border: '1px solid rgba(39,130,228,.2)',
+    hoverBg: 'rgba(39,130,228,.18)',
+    hoverShadow: '0 2px 8px rgba(39,130,228,.25)',
+  },
+  danger: {
+    background: 'var(--danger-bg,rgba(246,71,71,.1))',
+    color: 'var(--danger,#f64747)',
+    border: '1px solid rgba(246,71,71,.2)',
+    hoverBg: 'rgba(246,71,71,.18)',
+    hoverShadow: '0 2px 8px rgba(246,71,71,.25)',
+  },
+  success: {
+    background: 'var(--success-bg,rgba(39,174,96,.1))',
+    color: 'var(--success,#27ae60)',
+    border: '1px solid rgba(39,174,96,.2)',
+    hoverBg: 'rgba(39,174,96,.18)',
+    hoverShadow: '0 2px 8px rgba(39,174,96,.25)',
+  },
+  warning: {
+    background: 'var(--accent-bg,rgba(249,158,44,.1))',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent-border,rgba(249,158,44,.25))',
+    hoverBg: 'rgba(249,158,44,.18)',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.25)',
+  },
+  ghost: {
+    background: 'transparent',
+    color: 'var(--t2,#797b8d)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverColor: 'var(--t1,#1a1a2e)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  outline: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent,#f99e2c)',
+    hoverBg: 'var(--accent-bg,rgba(249,158,44,.1))',
+  },
+  link: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid transparent',
+    paddingLeft: 4,
+    paddingRight: 4,
+    boxShadow: 'none',
+    hoverTextDec: 'underline',
+  },
+  'no-line': {
+    background: 'none',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'var(--t3,#8a96b0)',
+    paddingLeft: 14,
+    paddingRight: 14,
+    borderRadius: 'var(--rmd,8px)',
+    hoverColor: 'var(--p,var(--accent,#f99e2c))',
+    hoverBg: 'var(--pd,var(--accent-bg,rgba(249,158,44,.1)))',
+  },
+};
+
+const SIZES = {
+  xs: { padding: '4px 8px', fontSize: 12, height: 28 },
+  sm: { padding: '4px 8px', fontSize: 12, height: 32 },
+  md: { padding: '8px 16px', fontSize: 13, height: 38 },
+  lg: { padding: '10px 20px', fontSize: 14, height: 44 },
+};
+
+const ICON_STYLE = {
+  padding: 0,
+  width: 30,
+  height: 30,
+  borderRadius: 'var(--rads,8px)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export default function Button({
+  children,
+  variant = 'default',
+  size = 'md',
+  icon = null,
+  iconRight = null,
+  disabled = false,
+  loading = false,
+  onClick = null,
+  style = {},
+  className = '',
+  ...props
+}) {
+  const v = VARIANTS[variant] || VARIANTS.default;
+  const s = SIZES[size] || SIZES.md;
+
+  const isIconOnly = variant === 'icon';
+
+  return (
+    <button
+      className={className}
+      disabled={disabled || loading}
+      onClick={onClick}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        borderRadius: 'var(--rads,8px)',
+        fontFamily: 'var(--f,var(--sans,inherit))',
+        fontWeight: 500,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        whiteSpace: 'nowrap',
+        transition: 'all .14s',
+        letterSpacing: '-.01em',
+        outline: 'none',
+        boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+        opacity: disabled ? 0.45 : 1,
+        pointerEvents: disabled ? 'none' : undefined,
+        background: v.background,
+        color: v.color,
+        border: v.border,
+        padding: isIconOnly ? 0 : s.padding,
+        fontSize: s.fontSize,
+        height: isIconOnly ? 30 : s.height,
+        width: isIconOnly ? 30 : undefined,
+        ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
+        ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
+        ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
+        ...style,
+      }}
+      {...props}
+    >
+      {loading && <Spinner size={14} inline color="currentColor" />}
+      {!loading && icon && icon}
+      {!loading && children}
+      {!loading && iconRight && iconRight}
+    </button>
+  );
+}

package/components/Card.jsx

@@ -1,62 +1,62 @@
-import { Pagination } from './Pagination';
-
-export function PageShell({ title, children }) {
-  return (
-    <div className="page-shell" style={{ padding: '20px 24px' }}>
-      {children}
-    </div>
-  );
-}
-
-export function TableCard({ children }) {
-  return <div className="table-card">{children}</div>;
-}
-export function TableCardFilters({ children }) {
-  return <div className="table-card-filters">{children}</div>;
-}
-export function TableCardBody({ children }) {
-  return <div className="table-card-body">{children}</div>;
-}
-export function TableCardFooter({ total, page, limit, pages, onChange }) {
-  const from = total === 0 ? 0 : (page - 1) * limit + 1;
-  const to   = Math.min(page * limit, total);
-  return (
-    <div className="table-card-footer">
-      <span className="table-card-footer-count">
-        {total === 0 ? 'No records' : `${from}–${to} of ${total}`}
-      </span>
-      <Pagination page={page} pages={pages} onChange={onChange} />
-    </div>
-  );
-}
-
-export function CardHdr({ title, icon: Icon, tabs, children }) {
-  return (
-    <div className="card-hdr">
-      <div className="card-title">
-        {Icon && <Icon size={14} />}
-        {title}
-        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
-      </div>
-      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
-    </div>
-  );
-}
-
-export function StatCard({ label, value, sub }) {
-  return (
-    <div className="stat">
-      <div className="stat-label">{label}</div>
-      <div className="stat-val">{value ?? '—'}</div>
-      {sub && <div className="stat-sub">{sub}</div>}
-    </div>
-  );
-}
-export function StatCardSkeleton() {
-  return (
-    <div className="stat-skeleton">
-      <div className="skeleton skeleton-text short" style={{ marginBottom: 10 }} />
-      <div className="skeleton skeleton-text mid" style={{ height: 28, marginBottom: 6 }} />
-    </div>
-  );
-}
+import { Pagination } from './Pagination';
+
+export function PageShell({ title, children }) {
+  return (
+    <div style={{ padding: '20px 24px' }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCard({ children }) {
+  return <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: 0 }}>{children}</div>;
+}
+export function TableCardFilters({ children }) {
+  return <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>{children}</div>;
+}
+export function TableCardBody({ children }) {
+  return <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, scrollbarWidth: 'thin', scrollbarColor: 'var(--grey-2, #d7d8e0) transparent' }}>{children}</div>;
+}
+export function TableCardFooter({ total, page, limit, pages, onChange }) {
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to   = Math.min(page * limit, total);
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0', borderTop: '1px solid var(--border-light, #ebebf0)', fontSize: '.78rem', color: 'var(--muted, #9b9daa)' }}>
+      <span>
+        {total === 0 ? 'No records' : `${from}–${to} of ${total}`}
+      </span>
+      <Pagination page={page} pages={pages} onChange={onChange} />
+    </div>
+  );
+}
+
+export function CardHdr({ title, icon: Icon, tabs, children }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 0', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '.85rem', fontWeight: 600, color: 'var(--primary-text, #0f111c)' }}>
+        {Icon && <Icon size={14} />}
+        {title}
+        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
+      </div>
+      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
+    </div>
+  );
+}
+
+export function StatCard({ label, value, sub }) {
+  return (
+    <div style={{ background: 'var(--surface, #fff)', border: '1px solid var(--border-light, #ebebf0)', borderRadius: 'var(--rads, 8px)', padding: '14px 16px', boxShadow: 'var(--shadow, 0px 1px 3px rgba(20,22,41,.10))' }}>
+      <div style={{ fontSize: '.62rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--muted, #9b9daa)', marginBottom: 4 }}>{label}</div>
+      <div style={{ fontSize: '1.4rem', fontWeight: 700, color: 'var(--primary-text, #0f111c)', lineHeight: 1.2 }}>{value ?? '—'}</div>
+      {sub && <div style={{ fontSize: '.72rem', color: 'var(--muted, #9b9daa)', marginTop: 2 }}>{sub}</div>}
+    </div>
+  );
+}
+export function StatCardSkeleton() {
+  return (
+    <div style={{ background: 'var(--surface, #fff)', border: '1px solid var(--border-light, #ebebf0)', borderRadius: 'var(--rads, 8px)', padding: '14px 16px' }}>
+      <div className="skeleton skeleton-text" style={{ marginBottom: 10, height: 12, width: '40%', background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
+      <div className="skeleton skeleton-text" style={{ height: 28, width: '60%', marginBottom: 6, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
+    </div>
+  );
+}