@demokit-ui/demokit 0.1.0

package/dist/config.reui.css

@@ -0,0 +1,337 @@
+@plugin 'tailwindcss-animate';
+
+/** Colors — Scheme A · Glass (Sky + Blue) **/
+:root {
+  /** Base **/
+  --background: #f9fafb;
+  --foreground: #181c32;
+  --card: #ffffff;
+  --card-foreground: #181c32;
+  --popover: #ffffff;
+  --popover-foreground: #181c32;
+
+  /** Primary (Sky #009EF7) **/
+  --primary: #009ef7;
+  --primary-hover: #0095e8;
+  --primary-light: #f1faff;
+  --primary-foreground: #ffffff;
+
+  /** Secondary (soft muted) **/
+  --secondary: #f3f6f9;
+  --secondary-foreground: #3f4254;
+
+  --muted: #f3f6f9;
+  --muted-foreground: #7e8299;
+
+  --accent: #f3f6f9;
+  --accent-foreground: #181c32;
+
+  /** Destructive (Danger #F64E60) **/
+  --destructive: #f64e60;
+  --destructive-light: #ffe2e5;
+  --destructive-foreground: #ffffff;
+
+  /** Success (Teal #1BC5BD) **/
+  --success: #1bc5bd;
+  --success-light: #c9f7f5;
+  --success-foreground: #ffffff;
+
+  /** Warning (Amber #FFA800) **/
+  --warning: #ffa800;
+  --warning-light: #fff4de;
+  --warning-foreground: #ffffff;
+
+  /** Info (Violet #8950FC) **/
+  --info: #8950fc;
+  --info-light: #eee5ff;
+  --info-foreground: #ffffff;
+
+  --mono: #181c32;
+  --mono-foreground: #ffffff;
+
+  /** Base Styles **/
+  --border: #e4e6ef;
+  --input: #ebedf3;
+  --ring: #009ef7;
+  --radius: 0.625rem;
+
+  /** Appearance density — compact is the B-side default. **/
+  --dk-page-gap: 1rem;
+  --dk-container-x: 1rem;
+  --dk-card-padding: 1rem;
+  --dk-card-padding-x: 1rem;
+  --dk-card-header-height: 3rem;
+  --dk-card-inner-gap: 0.875rem;
+  --dk-card-field-padding: 0.625rem;
+  --dk-control-height: 2rem;
+  --dk-control-gap: 0.5rem;
+  --dk-filter-padding: 0.875rem;
+  --dk-filter-gap: 0.75rem;
+  --dk-table-head-height: 2.5rem;
+  --dk-table-cell-x: 1rem;
+  --dk-table-cell-y: 0.625rem;
+  --dk-demo-header-height: 58px;
+  --dk-demo-mobile-header-height: 56px;
+  --dk-demo-main-padding-top: 0.875rem;
+  --dk-demo-sidebar-width: 260px;
+  --dk-metric-icon-size: 2.25rem;
+  --dk-metric-value-size: 1.75rem;
+  --dk-summary-title-size: 1rem;
+  --dk-chart-min-height: 220px;
+
+  /** Appearance radius **/
+  --dk-radius-control: 0.375rem;
+  --dk-radius-card: 0.5rem;
+
+  /** Chart Palette (Glass · Sky + Teal + Amber + Violet + Danger + Mint) **/
+  --chart-1: #009ef7;
+  --chart-2: #1bc5bd;
+  --chart-3: #ffa800;
+  --chart-4: #8950fc;
+  --chart-5: #f64e60;
+  --chart-6: #50cd89;
+
+  /** Surface (Glass — translucent + blur + hairline white border) **/
+  --surface-bg: rgba(255, 255, 255, 0.95);
+  --surface-border: rgba(255, 255, 255, 0.6);
+  --surface-blur: 24px;
+  --surface-shadow: 0 1px 2px rgba(24, 28, 50, 0.03);
+
+  /** Page Decor — soft gradient visible only on glass **/
+  --decor-opacity: 1;
+  --decor-navy-opacity: 0;
+}
+
+[data-density='standard'] {
+  --dk-page-gap: 1.25rem;
+  --dk-container-x: 1.25rem;
+  --dk-card-padding: 1.125rem;
+  --dk-card-padding-x: 1.25rem;
+  --dk-card-header-height: 3.25rem;
+  --dk-card-inner-gap: 1rem;
+  --dk-card-field-padding: 0.75rem;
+  --dk-control-height: 2.125rem;
+  --dk-control-gap: 0.625rem;
+  --dk-filter-padding: 1rem;
+  --dk-filter-gap: 0.875rem;
+  --dk-table-head-height: 2.75rem;
+  --dk-table-cell-y: 0.75rem;
+  --dk-demo-header-height: 64px;
+  --dk-demo-mobile-header-height: 58px;
+  --dk-demo-main-padding-top: 1rem;
+  --dk-demo-sidebar-width: 270px;
+  --dk-metric-icon-size: 2.5rem;
+  --dk-metric-value-size: 1.875rem;
+  --dk-summary-title-size: 1.0625rem;
+  --dk-chart-min-height: 250px;
+}
+
+[data-density='relaxed'] {
+  --dk-page-gap: 1.5rem;
+  --dk-container-x: 1.5rem;
+  --dk-card-padding: 1.25rem;
+  --dk-card-padding-x: 1.25rem;
+  --dk-card-header-height: 3.5rem;
+  --dk-card-inner-gap: 1.125rem;
+  --dk-card-field-padding: 0.875rem;
+  --dk-control-height: 2.375rem;
+  --dk-control-gap: 0.75rem;
+  --dk-filter-padding: 1.125rem;
+  --dk-filter-gap: 1rem;
+  --dk-table-head-height: 3rem;
+  --dk-table-cell-y: 1rem;
+  --dk-demo-header-height: 70px;
+  --dk-demo-mobile-header-height: 60px;
+  --dk-demo-main-padding-top: 1.25rem;
+  --dk-demo-sidebar-width: 280px;
+  --dk-metric-icon-size: 2.75rem;
+  --dk-metric-value-size: 2rem;
+  --dk-summary-title-size: 1.125rem;
+  --dk-chart-min-height: 280px;
+}
+
+[data-radius='sharp'] {
+  --radius: 0.25rem;
+  --dk-radius-control: 0.25rem;
+  --dk-radius-card: 0.375rem;
+}
+
+[data-radius='sm'] {
+  --radius: 0.375rem;
+  --dk-radius-control: 0.375rem;
+  --dk-radius-card: 0.5rem;
+}
+
+[data-radius='md'] {
+  --radius: 0.5rem;
+  --dk-radius-control: 0.5rem;
+  --dk-radius-card: 0.625rem;
+}
+
+[data-radius='lg'] {
+  --radius: 0.75rem;
+  --dk-radius-control: 0.625rem;
+  --dk-radius-card: 0.875rem;
+}
+
+/** Navy Business · Royal Blue + Vibrant chart palette + flat surface **/
+[data-theme='navy'] {
+  --background: #f5f6f8;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-light: #dbeafe;
+  --primary-foreground: #ffffff;
+
+  --secondary: #f1f5f9;
+  --secondary-foreground: #334155;
+
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+
+  --accent: #f1f5f9;
+  --accent-foreground: #0f172a;
+
+  --destructive: #b91c1c;
+  --destructive-light: #fee2e2;
+  --destructive-foreground: #ffffff;
+
+  --success: #15803d;
+  --success-light: #dcfce7;
+  --success-foreground: #ffffff;
+
+  --warning: #c2410c;
+  --warning-light: #ffedd5;
+  --warning-foreground: #ffffff;
+
+  --info: #0369a1;
+  --info-light: #e0f2fe;
+  --info-foreground: #ffffff;
+
+  --mono: #0f172a;
+  --mono-foreground: #ffffff;
+
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #2563eb;
+
+  /** Chart Palette · V1 Vibrant (Blue / Violet / Teal / Orange / Rose / Cyan) **/
+  --chart-1: #2563eb;
+  --chart-2: #7c3aed;
+  --chart-3: #0d9488;
+  --chart-4: #f97316;
+  --chart-5: #e11d48;
+  --chart-6: #0891b2;
+
+  /** Surface · Flat — solid white + 1px slate border, no blur **/
+  --surface-bg: #ffffff;
+  --surface-border: #e2e8f0;
+  --surface-blur: 0px;
+  --surface-shadow: none;
+
+  /** Hide glass gradient; show a plain neutral backdrop instead **/
+  --decor-opacity: 0;
+  --decor-navy-opacity: 1;
+}
+
+/** Theme Setup **/
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-light: var(--destructive-light);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-success: var(--success);
+  --color-success-light: var(--success-light);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-light: var(--warning-light);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-info: var(--info);
+  --color-info-light: var(--info-light);
+  --color-info-foreground: var(--info-foreground);
+
+  --color-mono: var(--mono);
+  --color-mono-foreground: var(--mono-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+  @keyframes collapsible-down {
+    from { height: 0; }
+    to { height: var(--radix-collapsible-content-height); }
+  }
+  @keyframes collapsible-up {
+    from { height: var(--radix-collapsible-content-height); }
+    to { height: 0; }
+  }
+  @keyframes caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+  }
+}
+
+/** Custom Font Size **/
+@theme {
+  --text-2sm: 0.8125rem;
+  --text-2sm--line-height: calc(1.075 / 0.8125);
+
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: calc(0.825 / 0.6875);
+}

package/dist/demos/demo1.css

@@ -0,0 +1,176 @@
+@layer components {
+  /* Variables */
+  .demo1 {
+    --sidebar-transition-duration: 0.3s;
+    --sidebar-transition-timing: ease;
+    --sidebar-width: var(--dk-demo-sidebar-width);
+    --sidebar-width-collapse: 80px;
+    --sidebar-default-width: var(--dk-demo-sidebar-width);
+    --header-height: var(--dk-demo-header-height);
+  }
+
+  @media (max-width: theme(--breakpoint-lg)) {
+    .demo1 {
+      --sidebar-width: var(--dk-demo-sidebar-width);
+      --header-height: var(--dk-demo-mobile-header-height);
+    }
+  }
+
+  /* Base */
+  .demo1 .header {
+    height: var(--header-height);
+  }
+
+  .demo1 .sidebar {
+    width: var(--sidebar-width);
+  }
+
+  .demo1.header-fixed .wrapper {
+    padding-top: var(--header-height);
+  }
+
+  .demo1 .wrapper main[role='content'] {
+    padding-top: var(--dk-demo-main-padding-top);
+  }
+
+  /* Desktop mode */
+  @media (min-width: theme(--breakpoint-lg)) {
+    .demo1 .sidebar {
+      width: var(--sidebar-width);
+      transition: width var(--sidebar-transition-duration)
+        var(--sidebar-transition-timing);
+    }
+
+    .demo1 .sidebar .sidebar-header {
+      height: var(--header-height);
+    }
+
+    .demo1 .sidebar .sidebar-wrapper {
+      width: var(--sidebar-default-width);
+    }
+
+    .demo1 .sidebar .sidebar-logo {
+      width: var(--sidebar-default-width);
+    }
+
+    .demo1 .sidebar .small-logo {
+      display: none;
+    }
+
+    .demo1.sidebar-fixed .wrapper {
+      padding-inline-start: var(--sidebar-width) !important;
+    }
+
+    .demo1.sidebar-fixed.header-fixed .header {
+      inset-inline-start: var(--sidebar-width) !important;
+    }
+
+    .demo1.sidebar-fixed.header-fixed .wrapper {
+      padding-top: var(--header-height);
+    }
+
+    .demo1.sidebar-collapse {
+      --sidebar-width: var(--sidebar-width-collapse);
+    }
+
+    .demo1.sidebar-collapse .sidebar {
+      transition: width var(--sidebar-transition-duration)
+        var(--sidebar-transition-timing);
+    }
+
+    .demo1.sidebar-collapse .sidebar:hover {
+      width: var(--sidebar-default-width);
+    }
+
+    .demo1.sidebar-collapse .sidebar:not(:hover) .default-logo {
+      display: none;
+    }
+
+    .demo1.sidebar-collapse .sidebar:not(:hover) .small-logo {
+      display: flex;
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='accordion-menu-title'],
+    .demo1.sidebar-collapse .sidebar:not(:hover) [data-slot='badge'],
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='accordion-menu-sub-indicator'] {
+      display: none !important;
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='accordion-menu-sub-content'] {
+      visibility: hidden;
+      position: absolute;
+      height: 0;
+      width: 0;
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='accordion-menu-label'] {
+      visibility: hidden;
+      position: relative;
+    }
+
+    /* Theme toggle — collapsed sidebar compact mode */
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='theme-toggle-label'],
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='theme-toggle-text'] {
+      display: none !important;
+    }
+
+    .demo1.sidebar-collapse .sidebar:not(:hover) .theme-toggle {
+      padding: 0.75rem 0.5rem !important;
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='theme-toggle-grid'] {
+      grid-template-columns: 1fr !important;
+      gap: 0.25rem !important;
+      width: 3.75rem; /* 60px — fits inside the 80px collapsed sidebar */
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='theme-toggle-grid'] > button {
+      padding: 0 !important;
+      gap: 0 !important;
+    }
+
+    .demo1.sidebar-collapse
+      .sidebar:not(:hover)
+      [data-slot='accordion-menu-label']::before {
+      content: '...';
+      color: currentColor;
+      font-size: inherit;
+      position: absolute;
+      visibility: visible;
+      display: inline-block;
+      bottom: 50%;
+      inset-inline-start: 0;
+      margin-inline-start: -0.15rem;
+      top: 0.25rem;
+      transform: translateX(100%);
+    }
+  }
+
+  .demo1.layout-initialized .wrapper {
+    transition: padding-inline-start var(--sidebar-transition-duration)
+      var(--sidebar-transition-timing);
+  }
+
+  .demo1.layout-initialized .header {
+    transition: inset-inline-start var(--sidebar-transition-duration)
+      var(--sidebar-transition-timing);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export * from './kit/components';
+export * from './kit/themes/theme-toggle';
+export * from './kit/tokens/chart-palette';
+export * from './app/container';
+export * from './app/background-decor';
+export * from './app/demo1-shell';
+export * from './app/tweak-panel';
+export * from './providers/settings-provider';
+export * from './providers/theme-provider';
+export * from './providers/tooltips-provider';
+export * from './providers/demokit-provider';
+export * from './config/types';
+export { APP_SETTINGS } from './config/settings.config';
+export { cn } from './lib/utils';