@kala-ui/react-app 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/config/charts.js

@@ -0,0 +1,23 @@
+export const chartSkeletonStyles = {
+    root: "w-full space-y-4",
+    frame: "w-full rounded-lg border bg-card kala-surface-card",
+    frameInner: "flex items-center justify-center h-full",
+    frameFill: "h-full w-full",
+    legendRow: "flex gap-4 justify-center mt-4",
+    legendItem: "flex items-center gap-2",
+    legendDot: "h-3 w-3 rounded-full",
+    legendLabel: "h-4 w-16",
+    tableWrap: "mt-6",
+    tableHead: "h-4 w-24",
+    tableRow: "border-0",
+    tableCell: "h-4 w-20",
+};
+export const chartStyles = {
+    root: "w-full",
+    empty: "w-full flex flex-col items-center justify-center text-center rounded-lg border bg-card text-muted-foreground",
+    emptyIcon: "mb-3 h-10 w-10 opacity-40",
+    emptyText: "text-sm",
+    titleBlock: "mb-1.5 text-left",
+    title: "text-lg font-semibold text-foreground",
+    subtitle: "text-sm text-muted-foreground",
+};

package/dist/config/footer.d.ts

@@ -0,0 +1,16 @@
+export declare const footerStyles: {
+    root: string;
+    inner: string;
+    centeredContent: string;
+    grid: string;
+    sectionTitle: string;
+    sectionList: string;
+    sectionLink: string;
+    customContent: string;
+    bottomRow: string;
+    bottomRowSide: string;
+    bottomRowCentered: string;
+    copyright: string;
+    socialList: string;
+    socialLink: string;
+};

package/dist/config/footer.js

@@ -0,0 +1,16 @@
+export const footerStyles = {
+    root: "w-full bg-muted text-muted-foreground border-t",
+    inner: "container mx-auto px-4 py-8 md:py-12",
+    centeredContent: "mb-12 flex flex-col items-center text-center",
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8",
+    sectionTitle: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4",
+    sectionList: "space-y-2",
+    sectionLink: "text-muted-foreground hover:text-primary transition-colors text-sm",
+    customContent: "md:col-span-2 lg:col-span-1",
+    bottomRow: "border-t pt-8 flex flex-col gap-4",
+    bottomRowSide: "md:flex-row md:justify-between md:items-center",
+    bottomRowCentered: "items-center",
+    copyright: "text-sm text-muted-foreground order-2 md:order-1",
+    socialList: "flex items-center gap-4 order-1 md:order-2",
+    socialLink: "text-muted-foreground hover:text-primary transition-colors",
+};

package/dist/config/index.d.ts

@@ -0,0 +1,7 @@
+export { appShellStyles } from "./app-shell";
+export { chartStyles } from "./charts";
+export { footerStyles } from "./footer";
+export { metricCardStyles } from "./metric-card";
+export { sessionCardStyles } from "./session-card";
+export { socialLoginButtonStyles, socialLoginButtonsStyles, } from "./social-login-button";
+export { userMenuDropdownStyles } from "./user-menu-dropdown";

package/dist/config/index.js

@@ -0,0 +1,7 @@
+export { appShellStyles } from "./app-shell.js";
+export { chartStyles } from "./charts.js";
+export { footerStyles } from "./footer.js";
+export { metricCardStyles } from "./metric-card.js";
+export { sessionCardStyles } from "./session-card.js";
+export { socialLoginButtonStyles, socialLoginButtonsStyles, } from "./social-login-button.js";
+export { userMenuDropdownStyles } from "./user-menu-dropdown.js";

package/dist/config/metric-card.d.ts

@@ -0,0 +1,26 @@
+export declare const metricCardColorStyles: Record<string, string>;
+export declare const metricCardStyles: {
+    body: string;
+    head: string;
+    title: string;
+    icon: string;
+    value: string;
+    meta: string;
+    change: string;
+    subtitle: string;
+};
+export declare const metricCardChangeColors: {
+    readonly up: "text-success";
+    readonly down: "text-destructive";
+    readonly flat: "text-muted-foreground";
+};
+export declare const metricCardSkeletonStyles: {
+    body: string;
+    head: string;
+    title: string;
+    icon: string;
+    valueBlock: string;
+    value: string;
+    meta: string;
+    metaLine: string;
+};

package/dist/config/metric-card.js

@@ -0,0 +1,34 @@
+export const metricCardColorStyles = {
+    primary: "bg-gradient-to-br from-primary to-primary/90 text-primary-foreground",
+    secondary: "bg-gradient-to-br from-secondary to-secondary/90 text-secondary-foreground",
+    destructive: "bg-gradient-to-br from-destructive to-destructive/90 text-destructive-foreground",
+    success: "bg-gradient-to-br from-success to-success/90 text-success-foreground",
+    warning: "bg-gradient-to-br from-warning to-warning/90 text-warning-foreground",
+    info: "bg-gradient-to-br from-info to-info/90 text-info-foreground",
+    muted: "bg-card border text-card-foreground",
+};
+export const metricCardStyles = {
+    body: "p-6",
+    head: "flex items-center justify-between mb-4",
+    title: "text-xs font-semibold uppercase tracking-wide",
+    icon: "",
+    value: "text-4xl font-bold leading-none",
+    meta: "text-sm",
+    change: "flex items-center gap-1",
+    subtitle: "",
+};
+export const metricCardChangeColors = {
+    up: "text-success",
+    down: "text-destructive",
+    flat: "text-muted-foreground",
+};
+export const metricCardSkeletonStyles = {
+    body: "p-6",
+    head: "flex items-center justify-between mb-4",
+    title: "h-4 w-24",
+    icon: "rounded-md",
+    valueBlock: "mb-3",
+    value: "h-10 w-32",
+    meta: "text-sm",
+    metaLine: "h-4 w-32",
+};

package/dist/config/session-card.d.ts

@@ -0,0 +1,32 @@
+export declare const sessionCardStyles: {
+    root: string;
+    header: string;
+    headerRow: string;
+    headerMain: string;
+    deviceIcon: string;
+    titleBlock: string;
+    titleRow: string;
+    title: string;
+    subtitle: string;
+    currentBadge: string;
+    revokeButton: string;
+    content: string;
+    detailList: string;
+    detailRow: string;
+    detailIcon: string;
+};
+export declare const sessionCardSkeletonStyles: {
+    root: string;
+    headerRow: string;
+    headerMain: string;
+    deviceIcon: string;
+    titleBlock: string;
+    titleSkeleton: string;
+    subtitleSkeleton: string;
+    badgeSkeleton: string;
+    revokeSkeleton: string;
+    detailList: string;
+    detailRowMedium: string;
+    detailRowNarrow: string;
+    detailRowWide: string;
+};

package/dist/config/session-card.js

@@ -0,0 +1,32 @@
+export const sessionCardStyles = {
+    root: "relative",
+    header: "pb-3",
+    headerRow: "flex items-start justify-between gap-4",
+    headerMain: "flex items-start gap-3 flex-1",
+    deviceIcon: "size-6 text-muted-foreground mt-0.5",
+    titleBlock: "flex-1 min-w-0",
+    titleRow: "flex items-center gap-2 flex-wrap",
+    title: "font-semibold text-sm",
+    subtitle: "text-xs text-muted-foreground mt-0.5",
+    currentBadge: "inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success border border-success/20",
+    revokeButton: "text-destructive hover:text-destructive hover:bg-destructive/10",
+    content: "pt-0",
+    detailList: "space-y-1.5 text-xs text-muted-foreground",
+    detailRow: "flex items-center gap-1.5",
+    detailIcon: "size-3.5",
+};
+export const sessionCardSkeletonStyles = {
+    root: "relative",
+    headerRow: "flex items-start justify-between gap-4",
+    headerMain: "flex items-start gap-3 flex-1",
+    deviceIcon: "rounded-md",
+    titleBlock: "flex-1 min-w-0",
+    titleSkeleton: "h-4 w-32 mb-1",
+    subtitleSkeleton: "h-3 w-48",
+    badgeSkeleton: "h-5 w-24 rounded-md",
+    revokeSkeleton: "h-8 w-16 rounded-md",
+    detailList: "space-y-1.5",
+    detailRowMedium: "h-4 w-48",
+    detailRowNarrow: "h-4 w-40",
+    detailRowWide: "h-4 w-56",
+};

package/dist/config/social-login-button.d.ts

@@ -0,0 +1,15 @@
+/** Social-login families: per-part base classes. */
+export declare const socialLoginButtonStyles: {
+    root: string;
+    icon: string;
+    spinner: string;
+};
+export declare const socialLoginButtonsStyles: {
+    root: string;
+    divider: string;
+    dividerLine: string;
+    dividerMask: string;
+    dividerLabel: string;
+    dividerRule: string;
+    list: string;
+};

package/dist/config/social-login-button.js

@@ -0,0 +1,15 @@
+/** Social-login families: per-part base classes. */
+export const socialLoginButtonStyles = {
+    root: "relative transition-colors duration-200 bg-transparent border-input text-foreground",
+    icon: "w-5 h-5 mr-2",
+    spinner: "w-5 h-5 mr-2 animate-spin",
+};
+export const socialLoginButtonsStyles = {
+    root: "w-full space-y-3",
+    divider: "relative",
+    dividerLine: "absolute inset-0 flex items-center",
+    dividerMask: "relative flex justify-center text-xs uppercase",
+    dividerLabel: "bg-background px-2 text-muted-foreground",
+    dividerRule: "w-full border-t",
+    list: "flex flex-wrap justify-center gap-2",
+};

package/dist/config/user-menu-dropdown.d.ts

@@ -0,0 +1,10 @@
+export declare const userMenuDropdownStyles: {
+    trigger: string;
+    avatar: string;
+    avatarFallback: string;
+    content: string;
+    label: string;
+    name: string;
+    email: string;
+    itemIcon: string;
+};

package/dist/config/user-menu-dropdown.js

@@ -0,0 +1,10 @@
+export const userMenuDropdownStyles = {
+    trigger: "h-auto p-1 rounded-full hover:bg-accent",
+    avatar: "size-8",
+    avatarFallback: "bg-primary text-primary-foreground text-sm font-medium",
+    content: "w-56",
+    label: "flex flex-col space-y-1",
+    name: "text-sm font-medium leading-none",
+    email: "text-xs text-muted-foreground leading-none",
+    itemIcon: "mr-2 size-4",
+};

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export * from "./components/navigation";
 export * from "./components/session-card";
 export * from "./components/sidebar";
 export * from "./components/social-login-button";
-export * from "./components/social-login-buttons";
 export * from "./components/sparkline-chart";
 export * from "./components/user-menu-dropdown";
 export { isActivePath } from "./lib/active-path";

package/dist/index.js

@@ -13,7 +13,6 @@ export * from "./components/navigation/index.js";
 export * from "./components/session-card/index.js";
 export * from "./components/sidebar/index.js";
 export * from "./components/social-login-button/index.js";
-export * from "./components/social-login-buttons/index.js";
 export * from "./components/sparkline-chart/index.js";
 export * from "./components/user-menu-dropdown/index.js";
 export { isActivePath } from "./lib/active-path.js";

package/dist/styles/app.css

@@ -3,8 +3,6 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-		"Courier New", monospace;
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-green-500: oklch(72.3% 0.219 149.579);
@@ -26,10 +24,8 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
-    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-xs: 20rem;
     --container-sm: 40rem;
     --container-md: 48rem;
     --container-2xl: 96rem;
@@ -90,25 +86,11 @@
     --color-error: var(--error);
     --color-info: var(--info);
     --color-info-foreground: var(--info-foreground);
-    --color-border: var(--border);
-    @supports (color: color-mix(in lab, red, red)) {
-      --color-border: color-mix(
-		in oklab,
-		var(--border),
-		transparent calc((1 - var(--border-alpha, 1)) * 100%)
-	);
-    }
+    --color-border: var(--kala-mix-border);
     --color-border-strong: var(--border-strong);
     --color-input: var(--input);
     --color-ring: var(--ring);
-    --color-overlay: var(--overlay);
-    @supports (color: color-mix(in lab, red, red)) {
-      --color-overlay: color-mix(
-		in oklab,
-		var(--overlay),
-		transparent calc((1 - var(--overlay-alpha, 0.5)) * 100%)
-	);
-    }
+    --color-overlay: var(--kala-mix-overlay);
     --color-brand-google: #4285f4;
     --color-brand-facebook: #1877f2;
     --color-brand-twitter: #1da1f2;
@@ -279,6 +261,9 @@
   .mb-1 {
     margin-bottom: var(--spacing);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -479,9 +464,6 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
-  .w-96 {
-    width: calc(var(--spacing) * 96);
-  }
   .w-\[70px\] {
     width: 70px;
   }
@@ -521,9 +503,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-0 {
     min-width: 0px;
   }
@@ -536,6 +515,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -846,9 +828,6 @@
       background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
     }
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -886,11 +865,7 @@
     background-color: var(--color-overlay);
   }
   .bg-overlay\/40 {
-    background-color: color-mix(in srgb, color-mix(
-		in oklab,
-		var(--overlay),
-		transparent calc((1 - var(--overlay-alpha, 0.5)) * 100%)
-	) 40%, transparent);
+    background-color: var(--color-overlay);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-overlay) 40%, transparent);
     }
@@ -926,10 +901,6 @@
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-blue-500 {
-    --tw-gradient-from: var(--color-blue-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-blue-600 {
     --tw-gradient-from: var(--color-blue-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -970,10 +941,6 @@
     --tw-gradient-from: var(--color-success);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-teal-500 {
-    --tw-gradient-from: var(--color-teal-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-teal-600 {
     --tw-gradient-from: var(--color-teal-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -986,10 +953,6 @@
     --tw-gradient-to: var(--color-blue-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-blue-600 {
-    --tw-gradient-to: var(--color-blue-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-destructive\/90 {
     --tw-gradient-to: var(--color-destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1045,10 +1008,6 @@
     --tw-gradient-to: var(--color-teal-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-teal-600 {
-    --tw-gradient-to: var(--color-teal-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-warning\/90 {
     --tw-gradient-to: var(--color-warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1158,9 +1117,6 @@
   .text-right {
     text-align: right;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kala-ui/react-app",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -84,10 +84,6 @@
       "types": "./dist/components/social-login-button/index.d.ts",
       "default": "./dist/components/social-login-button/index.js"
     },
-    "./social-login-buttons": {
-      "types": "./dist/components/social-login-buttons/index.d.ts",
-      "default": "./dist/components/social-login-buttons/index.js"
-    },
     "./sparkline-chart": {
       "types": "./dist/components/sparkline-chart/index.d.ts",
       "default": "./dist/components/sparkline-chart/index.js"
@@ -123,32 +119,32 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "apexcharts": "~7.0.0",
-    "lucide-react": "~1.34.0",
+    "lucide-react": "1.46.0",
     "react-apexcharts": "~2.1.1",
-    "simple-icons": "~16.28.0",
-    "@kala-ui/react": "0.1.0-beta.2",
-    "@kala-ui/react-hooks": "0.1.0-beta.0"
+    "simple-icons": "16.31.0",
+    "@kala-ui/react-hooks": "0.1.0-beta.0",
+    "@kala-ui/react": "0.1.0-beta.4"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "~4.3.3",
-    "@testing-library/jest-dom": "~7.0.1",
-    "@testing-library/react": "~16.3.2",
-    "@testing-library/user-event": "~14.6.6",
-    "@types/node": "~26.4.0",
-    "@types/react": "~19.2.18",
-    "@types/react-dom": "~19.2.5",
-    "@vitejs/plugin-react": "~6.1.0",
-    "@vitest/coverage-v8": "~4.1.11",
-    "jsdom": "^30.0.1",
-    "postcss": "~8.5.26",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwindcss": "~4.3.3",
-    "tailwindcss-animate": "~1.0.7",
-    "typescript": "~7.0.2",
-    "vite": "~8.2.2",
-    "vitest": "~4.1.11",
-    "vitest-axe": "^0.1.0"
+    "@tailwindcss/postcss": "4.3.3",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.7",
+    "@types/node": "26.5.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "@vitest/coverage-v8": "5.0.0",
+    "jsdom": "30.0.1",
+    "postcss": "8.5.28",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tailwindcss": "4.3.3",
+    "tailwindcss-animate": "1.0.7",
+    "typescript": "7.0.2",
+    "vite": "8.3.0",
+    "vitest": "5.0.0",
+    "vitest-axe": "0.1.0"
   },
   "scripts": {
     "build": "tsc && node ../../scripts/add-js-extensions.mjs . && pnpm exec postcss src/styles/app.css -o dist/styles/app.css",