@memobit/libs 1.0.1

package/dist/styles/utilities.scss

@@ -0,0 +1,238 @@
+// Mixins only — emits no CSS. Safe to @use from any component SCSS.
+// Emitted utility classes live in utility-classes.scss (imported once globally).
+
+// Flex mixins
+@mixin flex-around {
+    display: flex;
+    justify-content: space-around;
+}
+
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+@mixin flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+@mixin flex-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+// Typography
+@mixin text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin text-clamp($lines: 2) {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+@mixin themed-card-title($fallback-color: inherit, $fallback-size: var(--font-size-md), $fallback-weight: var(--font-weight-bold)) {
+    color: var(--card-title-color, #{$fallback-color});
+    font-family: var(--card-title-font-family, var(--font-family, sans-serif));
+    font-size: var(--card-title-font-size, #{$fallback-size});
+    font-style: var(--card-title-font-style, normal);
+    font-weight: var(--card-title-font-weight, #{$fallback-weight});
+    letter-spacing: var(--card-title-letter-spacing, normal);
+    text-transform: var(--card-title-text-transform, none);
+}
+
+@mixin themed-modal-title($fallback-color: var(--modal-header-color), $fallback-size: var(--font-size-xl), $fallback-weight: var(--font-weight-semibold)) {
+    color: var(--modal-title-color, #{$fallback-color});
+    font-family: var(--modal-title-font-family, var(--font-family, sans-serif));
+    font-size: var(--modal-title-font-size, #{$fallback-size});
+    font-style: var(--modal-title-font-style, normal);
+    font-weight: var(--modal-title-font-weight, #{$fallback-weight});
+    letter-spacing: var(--modal-title-letter-spacing, normal);
+    text-transform: var(--modal-title-text-transform, none);
+}
+
+@mixin themed-form-control-label($fallback-color: var(--form-control-color), $fallback-size: var(--font-size-sm), $fallback-weight: var(--font-weight-medium)) {
+    color: var(--form-control-label-color, #{$fallback-color});
+    font-size: var(--form-control-label-font-size, #{$fallback-size});
+    font-weight: var(--form-control-label-font-weight, #{$fallback-weight});
+    letter-spacing: var(--form-control-label-letter-spacing, normal);
+    text-transform: var(--form-control-label-text-transform, none);
+}
+
+// ── Form input mixins ────────────────────────────────────────────────────────
+@mixin input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+}
+
+@mixin input-label {
+    @include themed-form-control-label;
+}
+
+@mixin input-required {
+    color: var(--body-danger-color, #dc2626);
+    margin-left: var(--spacing-2);
+}
+
+@mixin input-field {
+    background-color: var(--form-control-background-color);
+    color: var(--form-control-color);
+    border: var(--spacing-1) solid var(--form-control-border-color);
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-12);
+    font-family: var(--form-control-font-family);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+    width: 100%;
+    box-sizing: border-box;
+
+    &:focus {
+        outline: none;
+        background-color: var(--form-control-focus-background-color);
+        border-color: var(--form-control-focus-border-color);
+        color: var(--form-control-focus-color);
+        box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
+    }
+
+    &::placeholder {
+        color: var(--form-control-placeholder-color);
+    }
+}
+
+@mixin input-highlighted {
+    border-color: var(--form-control-focus-border-color);
+}
+
+@mixin input-error {
+    background-color: var(--form-control-error-background-color);
+    border-color: var(--form-control-error-border-color);
+    color: var(--form-control-error-color);
+
+    &:focus {
+        background-color: var(--form-control-error-background-color);
+        border-color: var(--form-control-error-border-color);
+        box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
+    }
+}
+
+@mixin input-error-message {
+    font-size: var(--font-size-xs);
+    color: var(--form-control-error-color);
+}
+
+@mixin input-success {
+    background-color: var(--form-control-success-background-color);
+    border-color: var(--form-control-success-border-color);
+    color: var(--form-control-success-color);
+
+    &:focus {
+        background-color: var(--form-control-success-background-color);
+        border-color: var(--form-control-success-border-color);
+        box-shadow: 0 0 0 var(--spacing-2) var(--box-shadow);
+    }
+}
+
+@mixin input-success-message {
+    font-size: var(--font-size-xs);
+    color: var(--form-control-success-color);
+}
+
+@mixin form-control-component($name, $full-width: false) {
+    .#{$name}-wrapper {
+        @include input-wrapper;
+
+        @if $full-width {
+            width: 100%;
+        }
+
+        .#{$name}-label {
+            @include input-label;
+
+            .#{$name}-required {
+                @include input-required;
+            }
+        }
+
+        .#{$name} {
+            @include input-field;
+            @content;
+
+            &.#{$name}-error {
+                @include input-error;
+            }
+
+            &.#{$name}-success {
+                @include input-success;
+            }
+        }
+
+        &.#{$name}-highlighted {
+            .#{$name} {
+                @include input-highlighted;
+            }
+        }
+
+        .#{$name}-error-message {
+            @include input-error-message;
+        }
+
+        .#{$name}-success-message {
+            @include input-success-message;
+        }
+    }
+}
+
+@mixin form-control-affix($height) {
+    position: absolute;
+    height: $height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--form-control-placeholder-color);
+    z-index: 2;
+}
+
+// Responsive breakpoints
+@mixin mobile {
+    @media (max-width: 768px) {
+        @content;
+    }
+}
+
+@mixin tablet {
+    @media (min-width: 769px) and (max-width: 1024px) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: 1025px) {
+        @content;
+    }
+}
+
+@mixin not-mobile {
+    @media (min-width: 769px) {
+        @content;
+    }
+}
+
+@mixin not-desktop {
+    @media (max-width: 1024px) {
+        @content;
+    }
+}

package/dist/styles/utility-classes.scss

@@ -0,0 +1,93 @@
+// Emitted utility classes — import once globally (not per component).
+// Mixins live in utilities.scss.
+@use 'utilities' as *;
+
+// use this effect when you want to bring attention
+.status-pulse {
+    animation: pulse-status 2s ease-in-out infinite;
+}
+
+@keyframes pulse-status {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.6;
+    }
+}
+
+// Text alignment
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+// Text color
+.text-muted {
+    color: var(--body-color-muted);
+}
+
+// Cursor
+.cursor-pointer {
+    cursor: pointer;
+}
+
+// Flexbox helpers
+.flex-around {
+    @include flex-around;
+}
+
+.flex-center {
+    @include flex-center;
+}
+
+.flex-between {
+    @include flex-between;
+}
+
+.flex-column {
+    @include flex-column;
+}
+
+.flex-wrap {
+    @include flex-wrap;
+}
+
+// Responsive visibility
+.mobile {
+    @media (min-width: 769px) {
+        display: none !important;
+    }
+}
+
+.tablet {
+    @media (max-width: 768px), (min-width: 1025px) {
+        display: none !important;
+    }
+}
+
+.desktop {
+    @media (max-width: 1024px) {
+        display: none !important;
+    }
+}
+
+.not-mobile {
+    @media (max-width: 768px) {
+        display: none !important;
+    }
+}
+
+.not-desktop {
+    @media (min-width: 1025px) {
+        display: none !important;
+    }
+}

package/dist/styles/variables.scss

@@ -0,0 +1,73 @@
+:root {
+    --radius-sm: 4px;
+    --radius: 8px;
+    --radius-full: 9999px;
+
+    --checkbox-size: 18px;
+    --radio-size: 18px;
+
+    // Optional ambient background overlay, painted as a fixed body::before layer.
+    // Themes only set this when they want a radial glow behind app content;
+    // otherwise it stays `none` and the overlay is inert.
+    --body-background-glow: none;
+
+    --spacing-1: 1px;
+    --spacing-2: 2px;
+    --spacing-4: 4px;
+    --spacing-6: 6px;
+    --spacing-8: 8px;
+    --spacing-12: 12px;
+    --spacing-16: 16px;
+    --spacing-20: 20px;
+    --spacing-24: 24px;
+    --spacing-32: 32px;
+    --spacing-40: 40px;
+    --spacing-48: 48px;
+    --spacing-60: 60px;
+    --spacing-64: 64px;
+    --spacing-80: 80px;
+    --spacing-100: 100px;
+    --spacing-200: 200px;
+    --spacing-300: 300px;
+    --spacing-400: 400px;
+
+    --font-size-xxs: 0.625rem; // ~10px
+    --font-size-xs: 0.75rem; // ~12px
+    --font-size-sm: 0.875rem; // ~14px
+    --font-size-md: 1rem; // ~16px
+    --font-size-lg: 1.25rem; // ~20px
+    --font-size-xl: 1.5rem; // ~24px
+    --font-size-xxl: 2rem; // ~32px
+    --font-size-xxxl: 3rem; // ~48px
+
+    // Display/title font. Themes only need to set this when they want a second
+    // font for component titles (Card, Modal, Drawer, EmptyState, DataView).
+    // Otherwise it inherits the theme's body --font-family automatically.
+    --font-family-display: var(--font-family, sans-serif);
+
+    --font-family-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
+
+    // Font used by form inputs (inherits body by default). Override to
+    // var(--font-family-mono) if you want a terminal/data feel on inputs.
+    --form-control-font-family: var(--font-family, sans-serif);
+
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --line-height-none: 1;
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.5;
+    --line-height-loose: 1.8;
+
+    // animations
+    --duration-hover: 0.2s;
+    --duration-fade: 0.3s;
+    --duration-slide: 0.4s;
+
+    --transition-fast: 150ms ease-in-out;
+    --transition-moderate: 300ms ease-in-out;
+    --transition-slow: 500ms ease-in-out;
+}

package/dist/version.json

@@ -0,0 +1,6 @@
+{
+  "version": "1.0.1",
+  "buildNumber": 193,
+  "commit": "dfe192b",
+  "buildDate": "2026-06-18T15:24:28.384Z"
+}

package/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@memobit/libs",
+  "version": "1.0.1",
+  "description": "React component library powering the Memobit apps — 100+ components, 470+ icons, 70+ themes, helpers and hooks. TypeScript-first, ESM-only, React 19.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "ui",
+    "ui-kit",
+    "design-system",
+    "typescript",
+    "themes",
+    "icons",
+    "hooks",
+    "memobit"
+  ],
+  "author": "Iulian Cristea <iulianx@gmail.com>",
+  "license": "Apache-2.0",
+  "homepage": "https://react.memobit.ro/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CristeaIulian/memobit-react-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CristeaIulian/memobit-react-library/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "type": "module",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./dist/styles/variables.scss": "./dist/styles/variables.scss",
+    "./dist/styles/base.scss": "./dist/styles/base.scss",
+    "./dist/styles/effects.scss": "./dist/styles/effects.scss",
+    "./dist/styles/highlight.scss": "./dist/styles/highlight.scss",
+    "./dist/styles/scrollbars.scss": "./dist/styles/scrollbars.scss",
+    "./dist/styles/utilities.scss": "./dist/styles/utilities.scss",
+    "./dist/styles/utility-classes.scss": "./dist/styles/utility-classes.scss",
+    "./dist/styles/themes.scss": "./dist/styles/themes.scss",
+    "./dist/styles/theming/_profile-theme.scss": "./dist/styles/theming/_profile-theme.scss",
+    "./dist/styles/theming/amber-meridian.scss": "./dist/styles/theming/amber-meridian.scss",
+    "./dist/styles/theming/archive-indigo.scss": "./dist/styles/theming/archive-indigo.scss",
+    "./dist/styles/theming/arctic-blue.scss": "./dist/styles/theming/arctic-blue.scss",
+    "./dist/styles/theming/asphalt-code.scss": "./dist/styles/theming/asphalt-code.scss",
+    "./dist/styles/theming/atelier-media.scss": "./dist/styles/theming/atelier-media.scss",
+    "./dist/styles/theming/audit-ember.scss": "./dist/styles/theming/audit-ember.scss",
+    "./dist/styles/theming/azure-night.scss": "./dist/styles/theming/azure-night.scss",
+    "./dist/styles/theming/blossom-meadow.scss": "./dist/styles/theming/blossom-meadow.scss",
+    "./dist/styles/theming/blueprint-clay.scss": "./dist/styles/theming/blueprint-clay.scss",
+    "./dist/styles/theming/blush-market.scss": "./dist/styles/theming/blush-market.scss",
+    "./dist/styles/theming/brass-chronicle.scss": "./dist/styles/theming/brass-chronicle.scss",
+    "./dist/styles/theming/carbon-velocity.scss": "./dist/styles/theming/carbon-velocity.scss",
+    "./dist/styles/theming/chalk-circuit.scss": "./dist/styles/theming/chalk-circuit.scss",
+    "./dist/styles/theming/chrono-atlas.scss": "./dist/styles/theming/chrono-atlas.scss",
+    "./dist/styles/theming/clinical-aqua.scss": "./dist/styles/theming/clinical-aqua.scss",
+    "./dist/styles/theming/cobalt-pulse.scss": "./dist/styles/theming/cobalt-pulse.scss",
+    "./dist/styles/theming/citrus-vital.scss": "./dist/styles/theming/citrus-vital.scss",
+    "./dist/styles/theming/command-slate.scss": "./dist/styles/theming/command-slate.scss",
+    "./dist/styles/theming/crawler-dusk.scss": "./dist/styles/theming/crawler-dusk.scss",
+    "./dist/styles/theming/crimson-dusk.scss": "./dist/styles/theming/crimson-dusk.scss",
+    "./dist/styles/theming/cyber-forest.scss": "./dist/styles/theming/cyber-forest.scss",
+    "./dist/styles/theming/dashdarkx.scss": "./dist/styles/theming/dashdarkx.scss",
+    "./dist/styles/theming/ember-night.scss": "./dist/styles/theming/ember-night.scss",
+    "./dist/styles/theming/emerald-ledger.scss": "./dist/styles/theming/emerald-ledger.scss",
+    "./dist/styles/theming/frost-petal.scss": "./dist/styles/theming/frost-petal.scss",
+    "./dist/styles/theming/garden-harvest.scss": "./dist/styles/theming/garden-harvest.scss",
+    "./dist/styles/theming/gilded-bear.scss": "./dist/styles/theming/gilded-bear.scss",
+    "./dist/styles/theming/graphite-shell.scss": "./dist/styles/theming/graphite-shell.scss",
+    "./dist/styles/theming/horizon-amber.scss": "./dist/styles/theming/horizon-amber.scss",
+    "./dist/styles/theming/horizon-drift.scss": "./dist/styles/theming/horizon-drift.scss",
+    "./dist/styles/theming/ivory-serif.scss": "./dist/styles/theming/ivory-serif.scss",
+    "./dist/styles/theming/lavender-mist.scss": "./dist/styles/theming/lavender-mist.scss",
+    "./dist/styles/theming/light-blue.scss": "./dist/styles/theming/light-blue.scss",
+    "./dist/styles/theming/lumen.scss": "./dist/styles/theming/lumen.scss",
+    "./dist/styles/theming/luna.scss": "./dist/styles/theming/luna.scss",
+    "./dist/styles/theming/mesh-circuit.scss": "./dist/styles/theming/mesh-circuit.scss",
+    "./dist/styles/theming/midnight-atlas.scss": "./dist/styles/theming/midnight-atlas.scss",
+    "./dist/styles/theming/midnight-amber.scss": "./dist/styles/theming/midnight-amber.scss",
+    "./dist/styles/theming/midnight-folio.scss": "./dist/styles/theming/midnight-folio.scss",
+    "./dist/styles/theming/mint-meadow.scss": "./dist/styles/theming/mint-meadow.scss",
+    "./dist/styles/theming/mintone.scss": "./dist/styles/theming/mintone.scss",
+    "./dist/styles/theming/neon-tokyo.scss": "./dist/styles/theming/neon-tokyo.scss",
+    "./dist/styles/theming/noir-marquee.scss": "./dist/styles/theming/noir-marquee.scss",
+    "./dist/styles/theming/ocean-breeze.scss": "./dist/styles/theming/ocean-breeze.scss",
+    "./dist/styles/theming/ocean-depths.scss": "./dist/styles/theming/ocean-depths.scss",
+    "./dist/styles/theming/orbital-night.scss": "./dist/styles/theming/orbital-night.scss",
+    "./dist/styles/theming/sandstone.scss": "./dist/styles/theming/sandstone.scss",
+    "./dist/styles/theming/sandy-parchment.scss": "./dist/styles/theming/sandy-parchment.scss",
+    "./dist/styles/theming/screening-room.scss": "./dist/styles/theming/screening-room.scss",
+    "./dist/styles/theming/signal-burst.scss": "./dist/styles/theming/signal-burst.scss",
+    "./dist/styles/theming/signal-clarity.scss": "./dist/styles/theming/signal-clarity.scss",
+    "./dist/styles/theming/slate-focus.scss": "./dist/styles/theming/slate-focus.scss",
+    "./dist/styles/theming/slate-bazaar.scss": "./dist/styles/theming/slate-bazaar.scss",
+    "./dist/styles/theming/spectrum-vault.scss": "./dist/styles/theming/spectrum-vault.scss",
+    "./dist/styles/theming/tailwind-vue-dark.scss": "./dist/styles/theming/tailwind-vue-dark.scss",
+    "./dist/styles/theming/terminal-phosphor.scss": "./dist/styles/theming/terminal-phosphor.scss",
+    "./dist/styles/theming/terracotta-kitchen.scss": "./dist/styles/theming/terracotta-kitchen.scss",
+    "./dist/styles/theming/twilight-pulse.scss": "./dist/styles/theming/twilight-pulse.scss",
+    "./dist/styles/theming/vault-guard.scss": "./dist/styles/theming/vault-guard.scss",
+    "./dist/styles/theming/velvet-reel.scss": "./dist/styles/theming/velvet-reel.scss",
+    "./dist/styles/theming/velvet-tome.scss": "./dist/styles/theming/velvet-tome.scss",
+    "./dist/styles/theming/verdant-pulse.scss": "./dist/styles/theming/verdant-pulse.scss",
+    "./dist/styles/theming/vital-aurora.scss": "./dist/styles/theming/vital-aurora.scss",
+    "./dist/styles/theming/vital-signal.scss": "./dist/styles/theming/vital-signal.scss"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && npm pack",
+    "release": "npm run build && npm publish",
+    "prepublishOnly": "vite build",
+    "generate:icon-names": "node scripts/generate-icon-names.mjs",
+    "dev": "vite build --watch",
+    "playground": "vite serve playground --config playground/vite.config.ts",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
+  },
+  "peerDependencies": {
+    "react": "19.2.6",
+    "react-dom": "19.2.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.4",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.2",
+    "esbuild": "^0.28.0",
+    "eslint": "9.39.4",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-simple-import-sort": "13.0.0",
+    "globals": "17.6.0",
+    "prettier": "3.8.3",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "sass": "1.99.0",
+    "terser": "5.47.1",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.59.3",
+    "vite": "8.0.13",
+    "vite-plugin-dts": "5.0.0",
+    "vite-plugin-static-copy": "3.4.0"
+  },
+  "dependencies": {
+    "@google/genai": "2.2.0",
+    "react-router-dom": "7.15.1"
+  }
+}