@blank-software/core-components 0.0.1 → 0.0.2

package/src/lib/card/card.css

@@ -0,0 +1,31 @@
+@reference "tailwindcss";
+
+.card {
+  @apply rounded-2xl overflow-hidden;
+}
+
+.card-default {
+  @apply bg-surface shadow-sm;
+}
+
+.card-outlined {
+  @apply bg-surface border border-ink-200;
+}
+
+.card-padded > .card-body,
+.card-padded > [cardHeader],
+.card-padded > [cardFooter] {
+  @apply px-6;
+}
+
+.card-padded > .card-body {
+  @apply py-6;
+}
+
+.card-padded > [cardHeader] {
+  @apply pt-6 pb-4 border-b border-ink-100;
+}
+
+.card-padded > [cardFooter] {
+  @apply pb-6 pt-4 border-t border-ink-100;
+}

package/src/lib/checkbox/checkbox.css

@@ -0,0 +1,53 @@
+@reference "tailwindcss";
+
+/* ── Wrapper ── */
+.checkbox {
+  @apply inline-flex items-center gap-2 cursor-pointer select-none;
+}
+
+/* ── Hidden native input ── */
+.checkbox-input {
+  @apply sr-only;
+}
+
+/* ── Custom box ── */
+.checkbox-box {
+  @apply w-5 h-5 flex-shrink-0 border-2 border-ink-300 rounded
+         flex items-center justify-center
+         transition-all duration-200;
+}
+
+.checkbox-input:checked + .checkbox-box {
+  @apply bg-primary border-primary text-white;
+}
+
+.checkbox-input:focus-visible + .checkbox-box {
+  @apply ring-4 ring-primary-200;
+}
+
+.checkbox-input:disabled ~ .checkbox-box,
+.checkbox-input:disabled ~ .checkbox-label {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.checkbox-input:disabled ~ .checkbox-box {
+  @apply bg-surface-muted;
+}
+
+/* ── Check icon ── */
+.checkbox-check {
+  @apply w-3 h-3 opacity-0 transition-opacity duration-150;
+}
+
+.checkbox-input:checked + .checkbox-box .checkbox-check {
+  @apply opacity-100;
+}
+
+/* ── Indeterminate ── */
+.checkbox-indeterminate {
+  @apply bg-primary border-primary text-white;
+}
+
+.checkbox-indeterminate .checkbox-check {
+  @apply opacity-100;
+}

package/src/lib/header/header.css

@@ -0,0 +1,23 @@
+@reference "tailwindcss";
+
+/* ── Navbar container ── */
+.header {
+  @apply fixed top-0 left-0 right-0 z-50
+         bg-surface border-b border-ink-200
+         px-4 py-2.5;
+}
+
+/* ── Inner layout ── */
+.header-inner {
+  @apply flex items-center justify-between h-9;
+}
+
+/* ── Left section ── */
+.header-left {
+  @apply flex items-center;
+}
+
+/* ── Right section ── */
+.header-right {
+  @apply flex items-center gap-2;
+}

package/src/lib/input/input.css

@@ -0,0 +1,29 @@
+@reference "tailwindcss";
+
+/* ── Base ── */
+.input {
+  @apply w-full 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
+         disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-muted;
+}
+
+/* ── Sizes ── */
+.input-sm {
+  @apply text-sm px-3 py-2;
+}
+.input-md {
+  @apply text-sm px-4 py-2.5;
+}
+.input-lg {
+  @apply text-base px-5 py-3;
+}
+
+/* ── States ── */
+.input-error {
+  @apply border-error-500 focus:ring-error-200 focus:border-error-500;
+}
+.input-success {
+  @apply border-success-500 focus:ring-success-200 focus:border-success-500;
+}

package/src/lib/label/label.css

@@ -0,0 +1,27 @@
+@reference "tailwindcss";
+
+/* ── Base ── */
+.label {
+  @apply font-medium text-ink-700 inline-flex items-center gap-1;
+}
+
+/* ── Sizes ── */
+.label-sm {
+  @apply text-xs;
+}
+.label-md {
+  @apply text-sm;
+}
+.label-lg {
+  @apply text-base;
+}
+
+/* ── States ── */
+.label-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* ── Required indicator ── */
+.label-required {
+  @apply text-error font-bold;
+}

package/src/lib/modal/modal-dialog.css

@@ -0,0 +1,117 @@
+@reference "tailwindcss";
+
+/* ── Backdrop ── */
+.bsc-modal-backdrop {
+  @apply fixed inset-0 z-40 bg-black/40;
+  animation: bsc-modal-fade-in 0.2s ease-out;
+}
+
+/* ── Overlay (centering) ── */
+.bsc-modal-overlay {
+  @apply overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50
+         flex justify-center items-center w-full h-[calc(100%-1rem)] max-h-full
+         md:inset-0;
+  animation: bsc-modal-slide-in 0.2s ease-out;
+}
+
+/* ── Animations ── */
+@keyframes bsc-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bsc-modal-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ── Panel wrapper ── */
+.bsc-modal-panel {
+  @apply relative p-4 w-full max-h-full;
+}
+
+/* ── Sizes ── */
+.bsc-modal-sm {
+  @apply max-w-sm;
+}
+.bsc-modal-md {
+  @apply max-w-md;
+}
+.bsc-modal-lg {
+  @apply max-w-2xl;
+}
+
+/* ── Dialog card ── */
+.bsc-modal-dialog {
+  @apply relative bg-surface border border-ink-200 rounded-base shadow-sm
+         p-6 md:p-8 text-center;
+}
+
+/* ── Icon ── */
+.bsc-modal-dialog-icon {
+  @apply mx-auto mb-4 flex items-center justify-center w-16 h-16 rounded-full;
+}
+
+.bsc-modal-dialog-icon-success {
+  @apply bg-green-100 text-green-500;
+}
+
+.bsc-modal-dialog-icon-error {
+  @apply bg-red-100 text-red-500;
+}
+
+.bsc-modal-dialog-icon-confirm {
+  @apply bg-amber-100 text-amber-500;
+}
+
+/* ── Title ── */
+.bsc-modal-dialog-title {
+  @apply text-lg font-semibold text-ink-900 mb-2;
+}
+
+/* ── Text ── */
+.bsc-modal-dialog-text {
+  @apply text-sm text-ink-500 mb-6;
+}
+
+/* ── Actions ── */
+.bsc-modal-dialog-actions {
+  @apply flex items-center justify-center gap-3;
+}
+
+/* ── Confirm button ── */
+.bsc-modal-dialog-confirm-btn {
+  @apply inline-flex items-center font-medium rounded-base text-sm
+         px-5 py-2.5 text-white shadow-xs cursor-pointer
+         focus:ring-4 focus:outline-none;
+}
+
+.bsc-modal-dialog-btn-success {
+  @apply bg-green-500 hover:bg-green-600 focus:ring-green-200;
+}
+
+.bsc-modal-dialog-btn-error {
+  @apply bg-red-500 hover:bg-red-600 focus:ring-red-200;
+}
+
+.bsc-modal-dialog-btn-confirm {
+  @apply bg-primary hover:bg-primary-700 focus:ring-primary-200;
+}
+
+/* ── Cancel button ── */
+.bsc-modal-dialog-cancel-btn {
+  @apply inline-flex items-center font-medium rounded-base text-sm
+         px-5 py-2.5 text-ink-700 bg-ink-100 hover:bg-ink-200
+         shadow-xs cursor-pointer focus:ring-4 focus:ring-ink-100
+         focus:outline-none;
+}

package/src/lib/modal/modal.css

@@ -0,0 +1,69 @@
+@reference "tailwindcss";
+
+/* ── Backdrop ── */
+.bsc-modal-backdrop {
+  @apply fixed inset-0 z-40 bg-black/40;
+}
+
+/* ── Overlay (centering) ── */
+.bsc-modal-overlay {
+  @apply overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50
+         flex justify-center items-center w-full h-[calc(100%-1rem)] max-h-full
+         md:inset-0;
+}
+
+/* ── Panel wrapper ── */
+.bsc-modal-panel {
+  @apply relative p-4 w-full max-h-full;
+}
+
+/* ── Sizes ── */
+.bsc-modal-sm {
+  @apply max-w-sm;
+}
+.bsc-modal-md {
+  @apply max-w-md;
+}
+.bsc-modal-lg {
+  @apply max-w-2xl;
+}
+
+/* ── Content ── */
+.bsc-modal-content {
+  @apply relative bg-surface border border-ink-200 rounded-base shadow-sm p-4 md:p-6;
+}
+
+/* ── Header ── */
+.bsc-modal-header {
+  @apply flex items-center justify-between border-b border-ink-200 pb-4 md:pb-5;
+}
+
+.bsc-modal-title {
+  @apply text-lg font-medium text-ink-900;
+}
+
+.bsc-modal-close {
+  @apply text-ink-500 bg-transparent hover:bg-ink-100 hover:text-ink-900
+         rounded-base text-sm w-9 h-9 ms-auto
+         inline-flex justify-center items-center cursor-pointer;
+}
+
+/* ── Body ── */
+.bsc-modal-body {
+  @apply py-4 md:py-6;
+}
+
+/* ── Footer ── */
+.bsc-modal-footer {
+  @apply flex items-center space-x-4 border-t border-ink-200 pt-4 md:pt-6;
+}
+
+/* ── Confirm button ── */
+.bsc-modal-confirm-btn {
+  @apply inline-flex items-center text-white bg-primary
+         hover:bg-primary-700 box-border border border-transparent
+         focus:ring-4 focus:ring-primary-200 shadow-xs
+         font-medium leading-5 rounded-base text-sm px-4 py-2.5
+         focus:outline-none cursor-pointer
+         disabled:opacity-50 disabled:cursor-not-allowed;
+}

package/src/lib/pagination/pagination.css

@@ -0,0 +1,76 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pagination-list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--text-sm);
+}
+
+.pagination-list > li + li > .pagination-btn {
+  margin-left: -1px;
+}
+
+.pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface);
+  border: 1px solid var(--color-ink-200);
+  color: var(--color-ink-700);
+  font-weight: 500;
+  font-size: var(--text-sm);
+  height: 2.25rem;
+  cursor: pointer;
+  box-shadow: var(--shadow-xs);
+  transition:
+    background 150ms,
+    color 150ms;
+}
+
+.pagination-btn:hover:not(:disabled):not(.pagination-ellipsis) {
+  background: var(--color-ink-100);
+  color: var(--color-ink-900);
+}
+
+.pagination-btn-first {
+  border-radius: var(--radius-base) 0 0 var(--radius-base);
+  padding: 0 0.5rem;
+}
+
+.pagination-btn-prev {
+  padding: 0 0.5rem;
+}
+
+.pagination-btn-next {
+  padding: 0 0.5rem;
+}
+
+.pagination-btn-last {
+  border-radius: 0 var(--radius-base) var(--radius-base) 0;
+  padding: 0 0.5rem;
+}
+
+.pagination-btn-page {
+  width: 2.25rem;
+}
+
+.pagination-btn-active {
+  color: var(--color-primary);
+  background: var(--color-ink-100);
+}
+
+.pagination-btn-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.pagination-ellipsis {
+  cursor: default;
+  pointer-events: none;
+}

package/src/lib/progress-bar/progress-bar.css

@@ -0,0 +1,88 @@
+@reference "tailwindcss";
+
+/* ── Label ── */
+.progress-label {
+  @apply text-sm font-medium;
+}
+
+.progress-label-dark {
+  @apply text-ink-900;
+}
+.progress-label-brand {
+  @apply text-primary-700;
+}
+.progress-label-success {
+  @apply text-success-700;
+}
+.progress-label-danger {
+  @apply text-error-700;
+}
+.progress-label-warning {
+  @apply text-warning-700;
+}
+
+/* ── Outside header ── */
+.progress-outside-header {
+  @apply flex justify-between mb-1;
+}
+
+.progress-outside-value {
+  @apply text-sm font-medium text-ink-500;
+}
+
+/* ── Track ── */
+.progress-track {
+  @apply w-full bg-ink-200 rounded-full;
+}
+
+.progress-track-sm {
+  @apply h-1.5;
+}
+.progress-track-md {
+  @apply h-2;
+}
+.progress-track-lg {
+  @apply h-3;
+}
+
+.progress-track-inside {
+  @apply h-4;
+}
+
+/* ── Bar ── */
+.progress-bar {
+  @apply rounded-full transition-all duration-300;
+}
+
+.progress-bar-sm {
+  @apply h-1.5;
+}
+.progress-bar-md {
+  @apply h-2;
+}
+.progress-bar-lg {
+  @apply h-3;
+}
+
+/* ── Bar inside (with text) ── */
+.progress-bar-inside {
+  @apply h-4 text-xs font-medium text-white text-center p-0.5 leading-none
+         flex items-center justify-center;
+}
+
+/* ── Bar variants ── */
+.progress-bar-dark {
+  @apply bg-ink-900;
+}
+.progress-bar-brand {
+  @apply bg-primary;
+}
+.progress-bar-success {
+  @apply bg-success;
+}
+.progress-bar-danger {
+  @apply bg-error;
+}
+.progress-bar-warning {
+  @apply bg-warning;
+}

package/src/lib/radio/radio.css

@@ -0,0 +1,35 @@
+@reference "tailwindcss";
+
+/* ── Wrapper ── */
+.radio {
+  @apply inline-flex items-center gap-2 cursor-pointer select-none;
+}
+
+/* ── Hidden native input ── */
+.radio-input {
+  @apply sr-only;
+}
+
+/* ── Custom circle ── */
+.radio-circle {
+  @apply w-5 h-5 flex-shrink-0 rounded-full border-2 border-ink-300
+         transition-all duration-200;
+}
+
+.radio-input:checked + .radio-circle {
+  @apply border-primary;
+  box-shadow: inset 0 0 0 4px var(--color-primary);
+}
+
+.radio-input:focus-visible + .radio-circle {
+  @apply ring-4 ring-primary-200;
+}
+
+.radio-input:disabled ~ .radio-circle,
+.radio-input:disabled ~ .radio-label {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.radio-input:disabled ~ .radio-circle {
+  @apply bg-surface-muted;
+}

package/src/lib/select/select.css

@@ -0,0 +1,75 @@
+@reference "tailwindcss";
+
+/* ── Wrapper ── */
+.select-wrapper {
+  @apply relative inline-block w-full;
+}
+
+/* ── Trigger ── */
+.select-trigger {
+  @apply w-full appearance-none border border-ink-300 rounded-base bg-surface text-ink-900
+         pr-10 cursor-pointer text-left relative
+         transition-colors duration-200
+         focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;
+}
+
+.select-disabled {
+  @apply opacity-50 cursor-not-allowed bg-surface-muted;
+}
+
+.select-placeholder {
+  @apply text-ink-400;
+}
+
+/* ── Sizes ── */
+.select-sm {
+  @apply text-sm px-3 py-2;
+}
+.select-md {
+  @apply text-sm px-4 py-2.5;
+}
+.select-lg {
+  @apply text-base px-5 py-3;
+}
+
+/* ── States ── */
+.select-error {
+  @apply border-error-500 focus:ring-error-200 focus:border-error-500;
+}
+.select-success {
+  @apply border-success-500 focus:ring-success-200 focus:border-success-500;
+}
+
+/* ── Chevron icon ── */
+.select-icon {
+  @apply absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-ink-400
+         transition-transform duration-200;
+}
+.select-chevron-open {
+  @apply rotate-180;
+}
+
+/* ── Dropdown panel ── */
+.select-panel {
+  @apply absolute z-50 mt-1 w-full bg-surface border border-ink-200 rounded-base shadow-lg
+         max-h-60 overflow-y-auto py-1 list-none m-0 p-0;
+}
+
+/* ── Option item ── */
+.select-option {
+  @apply px-4 py-2.5 text-sm text-ink-900 cursor-pointer flex items-center gap-2
+         transition-colors duration-100
+         hover:bg-ink-50;
+}
+.select-option-selected {
+  @apply bg-primary-50 text-primary-700;
+}
+
+/* ── Checkbox (multi-select) ── */
+.select-checkbox {
+  @apply inline-flex items-center justify-center w-4 h-4 border border-ink-300 rounded-sm
+         bg-surface flex-shrink-0;
+}
+.select-checkbox-checked {
+  @apply bg-primary border-primary text-white;
+}

package/src/lib/sidebar/sidebar.css

@@ -0,0 +1,41 @@
+@reference "tailwindcss";
+
+/* ── Sidebar container ── */
+.sidebar {
+  @apply fixed top-0 left-0 z-40 w-64 h-screen
+         bg-surface border-r border-ink-200
+         flex flex-col
+         transition-transform duration-200 ease-in-out;
+}
+
+.sidebar-with-header {
+  @apply pt-14;
+}
+
+.sidebar-hidden {
+  @apply -translate-x-full invisible pointer-events-none;
+}
+
+.sidebar-visible {
+  @apply translate-x-0;
+}
+
+/* ── Header slot ── */
+.sidebar-header {
+  @apply p-5 border-b border-ink-200 flex items-center justify-between;
+}
+
+/* ── Scrollable body ── */
+.sidebar-body {
+  @apply mt-6 flex-1 overflow-y-auto p-4;
+}
+
+/* ── Footer slot ── */
+.sidebar-footer {
+  @apply p-4 border-t border-ink-200;
+}
+
+/* ── Hover trigger strip (left edge, invisible) ── */
+.sidebar-trigger {
+  @apply fixed top-0 left-0 z-30 w-3 h-screen;
+}