@tolle_/tolle-ui 0.0.1-beta

package/lib/tolle-cell.directive.d.ts

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TolleCellDirective {
+    template: TemplateRef<any>;
+    name: string;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TolleCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TolleCellDirective, "[tolleCell]", never, { "name": { "alias": "tolleCell"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/tolle-config.d.ts

@@ -0,0 +1,9 @@
+import { InjectionToken, Provider } from '@angular/core';
+export interface TolleConfig {
+    primaryColor?: string;
+    radius?: string;
+    defaultToastDuration?: number;
+    darkByDefault?: boolean;
+}
+export declare const TOLLE_CONFIG: InjectionToken<TolleConfig>;
+export declare function provideTolleConfig(config: TolleConfig): Provider[];

package/lib/tooltip.directive.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TooltipDirective implements OnDestroy {
+    private el;
+    content: string;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    private tooltipEl;
+    private cleanup?;
+    constructor(el: ElementRef);
+    show(): void;
+    hide(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[tolleTooltip]", never, { "content": { "alias": "tolleTooltip"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/types/date-range.d.ts

@@ -0,0 +1,4 @@
+export type DateRange = {
+    start: Date | null;
+    end: Date | null;
+};

package/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tolle_/tolle-ui",
+  "version": "0.0.1-beta",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A high-performance Angular UI library.",
+  "author": "Bernard Kojo Ossei-Agyei <bernard.ossei@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@floating-ui/dom": "^1.7.4"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/tolle_-tolle-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/tolle_-tolle-ui.mjs",
+      "esm": "./esm2022/tolle_-tolle-ui.mjs",
+      "default": "./fesm2022/tolle_-tolle-ui.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,32 @@
+export * from './lib/utils/cn';
+export * from './lib/button.component';
+export * from './lib/input.component';
+export * from './lib/card.component';
+export * from './lib/select.component';
+export * from './lib/select-item.component';
+export * from './lib/select-group.component';
+export * from './lib/select-separator.component';
+export * from './lib/switch.component';
+export * from './lib/badge.component';
+export * from './lib/skeleton.component';
+export * from './lib/checkbox.component';
+export * from './lib/tooltip.directive';
+export * from './lib/toast.service';
+export * from './lib/tolle-config';
+export * from './lib/multi-select.component';
+export * from './lib/calendar.component';
+export * from './lib/masked-input.component';
+export * from './lib/date-picker.component';
+export * from './lib/pagination.component';
+export * from './lib/data-table.component';
+export * from './lib/tolle-cell.directive';
+export * from './lib/accordion-item.component';
+export * from './lib/accordion.component';
+export * from './lib/modal.component';
+export * from './lib/modal-ref';
+export * from './lib/modal.service';
+export * from './lib/modal-stack.service';
+export * from './lib/modal';
+export * from './lib/button-group.component';
+export * from './lib/date-range-picker.component';
+export * from './lib/range-calendar.component';

package/theme.css

@@ -0,0 +1,211 @@
+/* Import CDK overlay styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* --- 1. CONFIGURATION (The only things you change) --- */
+  /* Blue-600 as default primary */
+  --primary: #2563eb;
+  --radius: 0.5rem;
+
+  /* --- 2. AUTO-GENERATION (Do not touch unless tweaking logic) --- */
+
+  /* Foreground: White text on primary */
+  --primary-foreground: #ffffff;
+  /* Secondary: Mix Primary with 85% White */
+  --secondary: color-mix(in srgb, var(--primary), #ffffff 85%);
+  --secondary-foreground: color-mix(in srgb, var(--primary), #000000 80%);
+
+  /* Muted: Mix Primary with 92% Light Gray */
+  --muted: color-mix(in srgb, var(--primary), #f3f4f6 92%);
+  --muted-foreground: color-mix(in srgb, var(--primary), #4b5563 40%);
+  --muted-foreground: #71717a;
+  /* Accent: Very light wash of primary (for hovers) */
+  --accent: color-mix(in srgb, var(--primary), transparent 90%);
+  --accent-foreground: var(--primary);
+
+  /* Borders */
+  --border: #dddddd;
+  --input: #e4e4e7;
+
+  /* Base */
+  --background: #ffffff;
+  --foreground: #020817;
+  --ring: color-mix(in srgb, var(--primary), transparent 75%);
+  --destructive: #ef4444;
+  --destructive-foreground: #f8fafc;
+  --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.dark {
+  /* --- Google Dark Mode Palette --- */
+  --background: #121212; /* Base Background */
+  --foreground: #e3e3e3; /* Soft white/gray text */
+
+  /* Secondary: Elevated surface (Google's "Surface" color) */
+  --secondary: #1f1f1f;
+  --secondary-foreground: #ffffff;
+
+  /* Muted: Used for tags or inactive backgrounds */
+  --muted: #2a2a2a;
+  --muted-foreground: #9aa0a6; /* Google's muted gray text */
+
+  /* Borders: Very subtle against the charcoal background */
+  --border: #3c4043;
+  --input: #3c4043;
+
+  /* Popover/Dropdown: Matches elevated surfaces */
+  --popover: #1f1f1f;
+  --popover-foreground: #e3e3e3;
+
+  /* Accent: Hover states */
+  --accent: rgba(255, 255, 255, 0.04);
+  --accent-foreground: var(--primary);
+
+  /* Primary Ring: Lower opacity for charcoal backgrounds */
+  --ring: color-mix(in srgb, var(--primary), transparent 40%);
+  --input-shadow: 0 0 #0000;
+}
+
+.dark tolle-card {
+  background-color: var(--secondary); /* #1f1f1f */
+  border-color: var(--border);
+}
+
+.dark tolle-input, .dark tolle-select button {
+  background-color: transparent; /* Google inputs often have a transparent or very dark base */
+}
+
+tolle-button svg {
+  @apply w-4 h-4; /* Default Lucide/Radix icon size */
+}
+
+.h-8 svg {
+  @apply w-3.5 h-3.5;
+}
+
+@layer base {
+  /* This ensures Remix Icons are centered and sized relative to text */
+  i[class^="ri-"], i[class*=" ri-"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    line-height: 1;
+    /* Standardized icon size for buttons/inputs */
+    font-size: 1.2rem;
+  }
+
+  /* Handle spacing when an icon is next to text */
+  .tolle-button-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* Scale icons down for XS and SM containers */
+  .size-xs i[class^="ri-"],
+  .size-xs i[class*=" ri-"],
+  .size-sm i[class^="ri-"],
+  .size-sm i[class*=" ri-"] {
+    font-size: 1rem;
+  }
+}
+
+@layer components {
+  /* Target the internal input and button elements */
+  tolle-input input,
+  tolle-select button,
+  tolle-masked-input input,
+  tolle-date-picker tolle-masked-input input {
+    box-shadow: var(--input-shadow);
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Remove shadow on focus to let the 'ring' effect take over cleanly */
+  tolle-input input:focus,
+  tolle-select button:focus,
+  tolle-masked-input input:focus {
+    box-shadow: 0 0 #0000;
+  }
+}
+
+/* Compact dropdown items when select is xs/sm */
+.size-xs tolle-select-item > div { padding: 4px 8px 4px 32px; font-size: 12px; }
+.size-sm tolle-select-item > div { padding: 6px 12px 6px 32px; }
+
+
+
+/* Ensure the backdrop covers the screen */
+.cdk-overlay-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* Our custom backdrop style from earlier */
+.tolle-modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+}
+
+
+/* --- Core Overlay Container --- */
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* --- The Individual Overlay Pane (The Modal Window) --- */
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1001; /* Must be HIGHER than the backdrop */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- The Backdrop --- */
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000; /* Must be LOWER than the pane */
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+/* Utility to ensure the flex centering works */
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}