@blank-software/core-components 0.0.1 → 0.0.2

package/src/lib/skeleton/skeleton.css

@@ -0,0 +1,46 @@
+@reference "tailwindcss";
+
+/* ── Base ── */
+.skeleton-base {
+  @apply bg-ink-200 rounded-md;
+}
+
+.skeleton-animated {
+  @apply animate-pulse;
+}
+
+/* ── Text ── */
+.skeleton-text-container {
+  @apply flex flex-col gap-2;
+}
+
+.skeleton-text {
+  @apply h-3;
+}
+
+/* ── Circular ── */
+.skeleton-circular {
+  @apply rounded-full;
+}
+
+/* ── Rectangular ── */
+.skeleton-rectangular {
+  @apply rounded-base;
+}
+
+/* ── Table ── */
+.skeleton-table {
+  @apply flex flex-col gap-2;
+}
+
+.skeleton-table-row {
+  @apply flex gap-2;
+}
+
+.skeleton-table-header-cell {
+  @apply h-4 flex-1 bg-ink-300 rounded-md;
+}
+
+.skeleton-table-cell {
+  @apply h-3 flex-1;
+}

package/src/lib/table/table.css

@@ -0,0 +1,97 @@
+@reference "tailwindcss";
+
+/* ── Wrapper ── */
+.table-wrapper {
+  @apply w-full;
+}
+
+/* ── Search ── */
+.table-search {
+  @apply relative mb-4;
+}
+
+.table-search-icon {
+  @apply absolute left-3 top-1/2 -translate-y-1/2 text-ink-400 pointer-events-none;
+}
+
+.table-search-input {
+  @apply w-full pl-10 pr-4 py-2.5 text-sm border border-ink-300 rounded-base bg-surface text-ink-900
+         placeholder:text-ink-400
+         transition-colors duration-200
+         focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;
+}
+
+/* ── Scroll container ── */
+.table-scroll {
+  @apply overflow-x-auto border border-ink-200 rounded-base;
+}
+
+/* ── Table ── */
+.table {
+  @apply w-full text-sm;
+}
+
+/* ── Header ── */
+.table-th {
+  @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-ink-500 bg-surface-muted;
+}
+
+.table-th-content {
+  @apply inline-flex items-center gap-1.5;
+}
+
+.table-th-sortable {
+  @apply cursor-pointer select-none transition-colors duration-150 hover:text-ink-700 hover:bg-ink-100;
+}
+
+/* ── Sort icon ── */
+.table-sort-icon {
+  @apply transition-opacity duration-150;
+}
+
+.table-sort-none {
+  @apply opacity-30;
+}
+
+.table-sort-asc {
+  @apply opacity-100;
+}
+
+.table-sort-desc {
+  @apply opacity-100;
+}
+
+/* ── Body cells ── */
+.table-td {
+  @apply px-4 py-3 text-ink-900 border-b border-ink-100;
+}
+
+/* ── Striped rows ── */
+.table-striped-row tbody tr:nth-child(even) {
+  @apply bg-ink-50;
+}
+
+/* ── Striped columns ── */
+.table-striped-column td:nth-child(even),
+.table-striped-column th:nth-child(even) {
+  @apply bg-ink-50;
+}
+
+/* ── Hover ── */
+.table-hover tbody tr {
+  @apply transition-colors duration-150;
+}
+
+.table-hover tbody tr:hover {
+  @apply bg-primary-50;
+}
+
+/* ── Empty state ── */
+.table-empty {
+  @apply px-4 py-12 text-center text-ink-400;
+}
+
+/* ── Pagination ── */
+.table-pagination {
+  @apply flex justify-end mt-4;
+}

package/src/lib/toggle/toggle.css

@@ -0,0 +1,52 @@
+@reference "tailwindcss";
+
+/* ── Wrapper button ── */
+.toggle {
+  @apply inline-flex items-center cursor-pointer
+         disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+/* ── Track ── */
+.toggle-track {
+  @apply relative bg-ink-300 rounded-full transition-colors duration-200 inline-flex items-center;
+}
+
+.toggle-track-checked {
+  @apply bg-primary;
+}
+
+/* ── Thumb ── */
+.toggle-thumb {
+  @apply absolute bg-white rounded-full shadow-sm transition-transform duration-200;
+}
+
+/* ── Sizes ── */
+.toggle-sm .toggle-track {
+  @apply w-8 h-5;
+}
+.toggle-sm .toggle-thumb {
+  @apply w-3.5 h-3.5 left-0.5;
+}
+.toggle-sm .toggle-thumb-checked {
+  @apply translate-x-3.5;
+}
+
+.toggle-md .toggle-track {
+  @apply w-11 h-6;
+}
+.toggle-md .toggle-thumb {
+  @apply w-4.5 h-4.5 left-0.5;
+}
+.toggle-md .toggle-thumb-checked {
+  @apply translate-x-5;
+}
+
+.toggle-lg .toggle-track {
+  @apply w-14 h-8;
+}
+.toggle-lg .toggle-thumb {
+  @apply w-6 h-6 left-1;
+}
+.toggle-lg .toggle-thumb-checked {
+  @apply translate-x-6;
+}

package/src/styles/index.css

@@ -0,0 +1,34 @@
+@import './theme.css';
+@import '../lib/accordion/accordion.css';
+@import '../lib/alert/alert.css';
+@import '../lib/avatar/avatar.css';
+@import '../lib/badge/badge.css';
+@import '../lib/breadcrumb/breadcrumb.css';
+@import '../lib/button/button.css';
+@import '../lib/card/card.css';
+@import '../lib/checkbox/checkbox.css';
+@import '../lib/date-picker/date-picker.css';
+@import '../lib/dropdown/dropdown.css';
+@import '../lib/file-upload/file-upload.css';
+@import '../lib/footer/footer.css';
+@import '../lib/form-field/form-field.css';
+@import '../lib/header/header.css';
+@import '../lib/icon/icon.css';
+@import '../lib/input/input.css';
+@import '../lib/label/label.css';
+@import '../lib/modal/modal.css';
+@import '../lib/modal/modal-dialog.css';
+@import '../lib/navigation/navigation.css';
+@import '../lib/pagination/pagination.css';
+@import '../lib/progress-bar/progress-bar.css';
+@import '../lib/radio/radio.css';
+@import '../lib/search-bar/search-bar.css';
+@import '../lib/select/select.css';
+@import '../lib/sidebar/sidebar.css';
+@import '../lib/skeleton/skeleton.css';
+@import '../lib/spinner/spinner.css';
+@import '../lib/stepper/stepper.css';
+@import '../lib/table/table.css';
+@import '../lib/tabs/tabs.css';
+@import '../lib/toggle/toggle.css';
+@import '../lib/tooltip/tooltip.css';

package/src/styles/theme.css

@@ -0,0 +1,133 @@
+@theme {
+  /* ===========================================
+   * COLORS - Primary (Brand Purple #5C00C2)
+   * =========================================== */
+  --color-primary: #5c00c2;
+  --color-primary-50: #faf5ff;
+  --color-primary-100: #f1e4ff;
+  --color-primary-200: #e0c8ff;
+  --color-primary-300: #c99eff;
+  --color-primary-400: #ad6aff;
+  --color-primary-500: #9238ff;
+  --color-primary-600: #5c00c2;
+  --color-primary-700: #4d00a3;
+  --color-primary-800: #3f0085;
+  --color-primary-900: #300066;
+  --color-primary-950: #1d003d;
+
+  /* ===========================================
+   * COLORS - Success (Green #87ED6B)
+   * =========================================== */
+  --color-success: #87ed6b;
+  --color-success-50: #f0fde8;
+  --color-success-100: #ddfbcd;
+  --color-success-200: #bdf69f;
+  --color-success-300: #96ec6f;
+  --color-success-400: #87ed6b;
+  --color-success-500: #52d224;
+  --color-success-600: #3ba91a;
+  --color-success-700: #2e8117;
+  --color-success-800: #286518;
+  --color-success-900: #235518;
+  --color-success-950: #0e2f09;
+
+  /* ===========================================
+   * COLORS - Ink / Neutral (#0F172A based)
+   * =========================================== */
+  --color-ink: #0f172a;
+  --color-ink-50: #f8fafc;
+  --color-ink-100: #f1f5f9;
+  --color-ink-200: #e2e8f0;
+  --color-ink-300: #cbd5e1;
+  --color-ink-400: #94a3b8;
+  --color-ink-500: #64748b;
+  --color-ink-600: #475569;
+  --color-ink-700: #334155;
+  --color-ink-800: #1e293b;
+  --color-ink-900: #0f172a;
+  --color-ink-950: #020617;
+
+  /* ===========================================
+   * COLORS - Warning (Amber)
+   * =========================================== */
+  --color-warning: #f59e0b;
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  /* ===========================================
+   * COLORS - Error / Danger (Red)
+   * =========================================== */
+  --color-error: #ef4444;
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+  --color-error-950: #450a0a;
+
+  /* ===========================================
+   * COLORS - Info (Blue)
+   * =========================================== */
+  --color-info: #3b82f6;
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
+
+  /* ===========================================
+   * COLORS - Surface (Backgrounds)
+   * =========================================== */
+  --color-surface: #ffffff;
+  --color-surface-dim: #f8fafc;
+  --color-surface-muted: #f1f5f9;
+
+  /* ===========================================
+   * TYPOGRAPHY - Font Families
+   * =========================================== */
+  --font-sans:
+    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  /* ===========================================
+   * BORDER RADIUS
+   * =========================================== */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-base: 0.7rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* ===========================================
+   * SHADOWS
+   * =========================================== */
+  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
+  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.06);
+  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.07), 0 4px 6px -4px rgb(15 23 42 / 0.04);
+  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.08), 0 8px 10px -6px rgb(15 23 42 / 0.04);
+}

package/types/blank-software-core-components.d.ts

@@ -154,6 +154,55 @@ declare class Modal {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "bsc-modal", never, { "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEsc": { "alias": "closeOnEsc"; "required": false; "isSignal": true; }; "confirmDisabled": { "alias": "confirmDisabled"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "confirmed": "confirmed"; "open": "openChange"; }, never, ["*", "[modalFooter]"], true, never>;
 }
 
+type ModalDialogType = 'confirm' | 'success' | 'error';
+interface ModalDialogOptions {
+    title?: string;
+    text?: string;
+    type?: ModalDialogType;
+    size?: Size;
+    confirmText?: string;
+    cancelText?: string;
+    showCancel?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+}
+interface ModalDialogResult {
+    confirmed: boolean;
+}
+declare class ModalDialog {
+    readonly cancelText: _angular_core.WritableSignal<string>;
+    readonly closeOnBackdrop: _angular_core.WritableSignal<boolean>;
+    readonly closeOnEsc: _angular_core.WritableSignal<boolean>;
+    readonly confirmText: _angular_core.WritableSignal<string>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    readonly showCancel: _angular_core.WritableSignal<boolean>;
+    readonly size: _angular_core.WritableSignal<Size>;
+    readonly text: _angular_core.WritableSignal<string>;
+    readonly title: _angular_core.WritableSignal<string>;
+    readonly type: _angular_core.WritableSignal<ModalDialogType>;
+    private readonly panel;
+    private resolvePromise;
+    configure(options: ModalDialogOptions): Promise<ModalDialogResult>;
+    protected confirm(): void;
+    protected dismiss(): void;
+    protected onBackdropClick(): void;
+    protected onEscKey(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalDialog, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalDialog, "bsc-modal-dialog", never, {}, {}, never, never, true, never>;
+}
+
+declare class ModalService {
+    private readonly appRef;
+    private readonly document;
+    private readonly injector;
+    confirm(options: Omit<ModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+    error(options: Omit<ModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+    fire(options: ModalDialogOptions): Promise<ModalDialogResult>;
+    success(options: Omit<ModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ModalService>;
+}
+
 declare class Navigation {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Navigation, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Navigation, "bsc-navigation", never, {}, {}, never, never, true, never>;
@@ -348,5 +397,5 @@ declare class Tooltip {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tooltip, "bsc-tooltip", never, {}, {}, never, never, true, never>;
 }
 
-export { Accordion, AccordionItem, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dropdown, FileUpload, Footer, FormField, Header, Icon, Input, Label, Modal, Navigation, Pagination, ProgressBar, Radio, SearchBar, Select, Sidebar, SidebarService, Skeleton, Spinner, Stepper, Table, Tabs, Toggle, Tooltip };
-export type { AlertVariant, ButtonShape, ButtonVariant, CardVariant, ProgressBarLabelPosition, ProgressBarVariant, SelectOption, Size, SkeletonVariant, SortDirection, SortState, State, StripedDirection, TableColumn };
+export { Accordion, AccordionItem, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dropdown, FileUpload, Footer, FormField, Header, Icon, Input, Label, Modal, ModalDialog, ModalService, Navigation, Pagination, ProgressBar, Radio, SearchBar, Select, Sidebar, SidebarService, Skeleton, Spinner, Stepper, Table, Tabs, Toggle, Tooltip };
+export type { AlertVariant, ButtonShape, ButtonVariant, CardVariant, ModalDialogOptions, ModalDialogResult, ModalDialogType, ProgressBarLabelPosition, ProgressBarVariant, SelectOption, Size, SkeletonVariant, SortDirection, SortState, State, StripedDirection, TableColumn };