@brickclay-org/ui 0.1.87 → 0.1.89

package/src/lib/input/input.css

@@ -1,24 +1,24 @@
 /* Input container */
-.input-container {
+.bk-input-container {
   @apply flex flex-col gap-1.5;
 }
 
 /* Label */
-.input-label {
+.bk-input-label {
   @apply text-sm font-medium text-[#141414];
 }
 
-.input-label-required {
+.bk-input-label-required {
   @apply text-[#E7000B] ml-0.5;
 }
 
 /* Input Wrapper */
-.input-wrapper {
+.bk-input-wrapper {
   @apply relative;
 }
 
 /* Input field base styles */
-.input-field {
+.bk-input-field {
   @apply w-full py-2.5 px-3 text-sm border rounded-[4px] outline-none transition-all duration-200 bg-white;
   height: 40px;
   box-sizing: border-box;
@@ -27,116 +27,116 @@
 }
 
 /* Default/Initial State */
-.input-field--default {
+.bk-input-field--default {
   @apply border-[#E3E3E7] text-[#141414] placeholder:text-[#6B7080];
 }
 
 /* Focused/Active State */
-.input-field--focused {
+.bk-input-field--focused {
   @apply border-[#6B7080] text-[#141414];
 }
 
 /* Filled State */
-.input-field--filled {
+.bk-input-field--filled {
   @apply border-[#E3E3E7] text-[#141414] bg-white;
 }
 
 /* Error State */
-.input-field--error {
+.bk-input-field--error {
   @apply border-[#E7000B] text-[#141414];
 }
 
 /* Disabled State */
-.input-field--disabled {
+.bk-input-field--disabled {
   @apply border-[#E3E3E7] bg-[#F4F4F6] text-[#A1A3AE] cursor-not-allowed;
 }
 
 /* Icon Input Field - Add padding-left for icon space */
-.input-field--icon {
-  @apply pl-[48px];
+.bk-input-field--icon {
+  @apply !pl-[48px];
 }
 
 /* Phone Input Field - Add padding-left for selector space */
-.input-field--phone {
+.bk-input-field--phone {
   @apply !pl-[80px];
 }
 
 /* URL Input Field - Add padding-left for prefix space */
-.input-field--url {
-  @apply pl-[72px];
+.bk-input-field--url {
+  @apply !pl-[72px];
 }
 
 /* Currency Input Field - Add padding-left for the dollar icon box */
-.input-field--currency {
-  @apply pl-[3.5rem];
+.bk-input-field--currency {
+  @apply !pl-[3.5rem];
 }
 
 /* Icon Left - Add padding-left for icon space */
-.input-field--icon-left {
-  @apply pl-[48px];
+.bk-input-field--icon-left {
+  @apply !pl-[48px];
 }
 
 /* Icon Right - Add padding-right for icon space */
-.input-field--icon-right {
-  @apply pr-[48px];
+.bk-input-field--icon-right {
+  @apply !pr-[48px];
 }
 
 /* Password - Add padding-right for password toggle icon space */
-.input-field--password {
-  @apply pr-[48px];
+.bk-input-field--password {
+  @apply !pr-[48px];
 }
 
 /* When both icon and URL are present, adjust padding */
-.input-field--icon.input-field--url {
-  @apply pl-[120px];
+.bk-input-field--icon.bk-input-field--url {
+  @apply !pl-[120px];
 }
 
 /* When phone and icon are present */
-.input-field--phone.input-field--icon {
-  @apply pl-[128px];
+.bk-input-field--phone.bk-input-field--icon {
+  @apply !pl-[128px];
 }
 
 /* Phone Country Selector - Absolute Positioned */
-.input-phone-selector {
+.bk-input-phone-selector {
   @apply absolute left-0 top-0 bottom-0 px-3 flex items-center gap-2 cursor-pointer border transition-colors duration-200;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.input-phone-selector-text {
+.bk-input-phone-selector-text {
   @apply text-xs leading-[18px] text-[#A1A3AE] font-normal;
 }
 
-.input-phone-selector-arrow {
+.bk-input-phone-selector-arrow {
   @apply w-4 h-4 transition-transform duration-200;
 }
 
-.input-phone-selector-arrow--open {
+.bk-input-phone-selector-arrow--open {
   @apply rotate-180;
 }
 
 /* Phone Selector - State Specific Border Colors */
-.input-phone-selector--default {
+.bk-input-phone-selector--default {
   @apply bg-white border-[#E3E3E7];
 }
 
-.input-phone-selector--focused {
+.bk-input-phone-selector--focused {
   @apply bg-white border-[#6B7080];
 }
 
-.input-phone-selector--filled {
+.bk-input-phone-selector--filled {
   @apply bg-white border-[#E3E3E7];
 }
 
-.input-phone-selector--error {
+.bk-input-phone-selector--error {
   @apply bg-white border-[#E7000B];
 }
 
-.input-phone-selector--disabled {
+.bk-input-phone-selector--disabled {
   @apply bg-[#F4F4F6] border-[#E3E3E7] cursor-not-allowed;
 }
 
-.input-phone-selector--disabled .input-phone-selector-text {
+.bk-input-phone-selector--disabled .bk-input-phone-selector-text {
   @apply text-[#A1A3AE];
 }
 
@@ -150,156 +150,156 @@
  *
  * `position: static` is declared explicitly rather than just omitted: CSS cascades per-property,
  * and a consumer with a stale cached copy of this package (or their own pre-CDK fork of this
- * class name) could still have `position: absolute; top-full; mt-1` on `.input-phone-dropdown`
+ * class name) could still have `position: absolute; top-full; mt-1` on `.bk-input-phone-dropdown`
  * loaded globally elsewhere — if this rule simply stopped mentioning `position` instead of
  * stating `static`, that stale declaration would be the only one left, and it would win by
  * default. This exact mechanism broke this dropdown in a downstream consumer before it was
  * fixed here at the source.
  */
-.input-phone-dropdown {
+.bk-input-phone-dropdown {
   @apply static left-auto top-auto mt-0 w-[80px] bg-white border border-[#E3E3E7] rounded-[4px] shadow-lg max-h-48 overflow-y-auto;
 }
 
-.input-phone-dropdown-item {
+.bk-input-phone-dropdown-item {
   @apply w-full px-5 py-2.5 text-center text-xs leading-[18px] text-[#6B7080] hover:bg-[#F9FAFA] transition-colors duration-200 border-none bg-transparent truncate;
 }
 
-.input-phone-dropdown-item--active {
+.bk-input-phone-dropdown-item--active {
   @apply bg-[#F9FAFA] text-[#141414];
 }
 
 /* Icon - Absolute Positioned Inside Input */
-.input-icon {
+.bk-input-icon {
   @apply absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none size-6;
 }
 
 /* When phone selector is present, adjust icon position */
-.input-wrapper--phone .input-icon {
+.bk-input-wrapper--phone .bk-input-icon {
   @apply left-[80px];
 }
 
 /* Search Icon - Absolute Positioned Inside Input */
-.input-search-icon {
+.bk-input-search-icon {
   @apply absolute top-1/2 -translate-y-1/2 w-5 h-5;
 }
 
 /* Search Icon Left */
-.input-search-icon--left {
+.bk-input-search-icon--left {
   @apply left-3;
 }
 
 /* Search Icon Right */
-.input-search-icon--right {
+.bk-input-search-icon--right {
   @apply right-3;
 }
 
 /* Password Toggle Button */
-.input-password-toggle {
+.bk-input-password-toggle {
   @apply absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 p-0 border-0 bg-transparent cursor-pointer outline-none flex items-center justify-center;
 }
 
-.input-password-toggle:disabled {
+.bk-input-password-toggle:disabled {
   @apply cursor-not-allowed opacity-50;
 }
 
-.input-password-toggle:hover:not(:disabled) {
+.bk-input-password-toggle:hover:not(:disabled) {
   @apply opacity-70;
 }
 
 /* Password Icon */
-.input-password-icon {
+.bk-input-password-icon {
   @apply w-5 h-5 pointer-events-none;
 }
 
 /* URL Prefix - Absolute Positioned Inside Input */
-.input-url-prefix {
+.bk-input-url-prefix {
   @apply absolute left-0 top-0 bottom-0 py-2.5 px-3 text-sm text-[#6B7080] bg-white border flex items-center transition-colors duration-200 pointer-events-none;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
 /* When icon is present, adjust URL prefix position */
-.input-wrapper--icon .input-url-prefix {
+.bk-input-wrapper--icon .bk-input-url-prefix {
   @apply left-[48px];
 }
 
 /* URL Prefix - State Specific Border Colors (matches input border) */
-.input-url-prefix--default {
+.bk-input-url-prefix--default {
   @apply border-[#E3E3E7];
 }
 
-.input-url-prefix--focused {
+.bk-input-url-prefix--focused {
   @apply border-[#6B7080];
 }
 
-.input-url-prefix--filled {
+.bk-input-url-prefix--filled {
   @apply border-[#E3E3E7];
 }
 
-.input-url-prefix--error {
+.bk-input-url-prefix--error {
   @apply border-[#E7000B];
 }
 
-.input-url-prefix--disabled {
+.bk-input-url-prefix--disabled {
   @apply bg-[#F4F4F6] text-[#A1A3AE] border-r-[#E3E3E7];
 }
 
 /* Currency Icon - Bordered box like the URL prefix, holds the dollar icon */
-.input-currency-icon {
+.bk-input-currency-icon {
   @apply absolute left-0 top-0 bottom-0 w-11 flex items-center justify-center bg-white border transition-colors duration-200 pointer-events-none;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.input-currency-icon img {
+.bk-input-currency-icon img {
   @apply w-5 h-5;
 }
 
 /* Currency Icon - State Specific Border Colors (matches input border) */
-.input-currency-icon--default {
+.bk-input-currency-icon--default {
   @apply border-[#E3E3E7];
 }
 
-.input-currency-icon--focused {
+.bk-input-currency-icon--focused {
   @apply border-[#6B7080];
 }
 
-.input-currency-icon--filled {
+.bk-input-currency-icon--filled {
   @apply border-[#E3E3E7];
 }
 
-.input-currency-icon--error {
+.bk-input-currency-icon--error {
   @apply border-[#E7000B];
 }
 
-.input-currency-icon--disabled {
+.bk-input-currency-icon--disabled {
   @apply bg-[#F4F4F6] border-[#E3E3E7];
 }
 
 /* Hint text */
-.input-hint {
+.bk-input-hint {
   @apply text-xs text-[#868997] font-normal;
 }
 
 /* Error message */
-.input-error {
+.bk-input-error {
   @apply text-xs text-[#E7000B] font-normal;
 }
 
 /* width */
-.input-container ::-webkit-scrollbar {
+.bk-input-container ::-webkit-scrollbar {
   width: 4px;
 }
 
 /* Track */
-.input-container ::-webkit-scrollbar-track {
+.bk-input-container ::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 8px;
   width: 8px;
 }
 
 /* Handle */
-.input-container ::-webkit-scrollbar-thumb {
+.bk-input-container ::-webkit-scrollbar-thumb {
   background: #D6D7DC;
   border-radius: 8px;
   transition: 0.3s ease-in-out;
@@ -307,106 +307,106 @@
 }
 
 /* Handle on hover */
-.input-container ::-webkit-scrollbar-thumb:hover {
+.bk-input-container ::-webkit-scrollbar-thumb:hover {
   background: #909090;
 }
 
 /* ============================== Compact / sm size ============================== */
-.input-container--sm .input-label {
+.bk-input-container--sm .bk-input-label {
   @apply text-xs;
 }
 
-.input-container--sm .input-hint,
-.input-container--sm .input-error {
+.bk-input-container--sm .bk-input-hint,
+.bk-input-container--sm .bk-input-error {
   @apply text-[11px];
 }
 
-.input-container--sm .input-field {
+.bk-input-container--sm .bk-input-field {
   @apply py-1.5 px-2.5 text-xs;
   height: 32px;
 }
 
-.input-container--sm .input-field--icon,
-.input-container--sm .input-field--icon-left {
-  @apply pl-8;
+.bk-input-container--sm .bk-input-field--icon,
+.bk-input-container--sm .bk-input-field--icon-left {
+  @apply !pl-8;
 }
 
-.input-container--sm .input-field--icon-right {
-  @apply pr-8;
+.bk-input-container--sm .bk-input-field--icon-right {
+  @apply !pr-8;
 }
 
-.input-container--sm .input-field--password {
-  @apply pr-8;
+.bk-input-container--sm .bk-input-field--password {
+  @apply !pr-8;
 }
 
-.input-container--sm .input-field--phone {
-  @apply pl-16;
+.bk-input-container--sm .bk-input-field--phone {
+  @apply !pl-16;
 }
 
-.input-container--sm .input-field--url {
-  @apply pl-16;
+.bk-input-container--sm .bk-input-field--url {
+  @apply !pl-16;
 }
 
-.input-container--sm .input-field--currency {
-  @apply pl-9;
+.bk-input-container--sm .bk-input-field--currency {
+  @apply !pl-9;
 }
 
-.input-container--sm .input-currency-icon {
+.bk-input-container--sm .bk-input-currency-icon {
   @apply w-8;
 }
 
-.input-container--sm .input-currency-icon img {
+.bk-input-container--sm .bk-input-currency-icon img {
   @apply w-4 h-4;
 }
 
-.input-container--sm .input-field--icon.input-field--url {
-  @apply pl-24;
+.bk-input-container--sm .bk-input-field--icon.bk-input-field--url {
+  @apply !pl-24;
 }
 
-.input-container--sm .input-field--phone.input-field--icon {
-  @apply pl-24;
+.bk-input-container--sm .bk-input-field--phone.bk-input-field--icon {
+  @apply !pl-24;
 }
 
-.input-container--sm .input-search-icon {
+.bk-input-container--sm .bk-input-search-icon {
   @apply w-4 h-4;
 }
 
-.input-container--sm .input-search-icon--left {
+.bk-input-container--sm .bk-input-search-icon--left {
   @apply left-2;
 }
 
-.input-container--sm .input-search-icon--right {
+.bk-input-container--sm .bk-input-search-icon--right {
   @apply right-2;
 }
 
-.input-container--sm .input-password-toggle {
+.bk-input-container--sm .bk-input-password-toggle {
   @apply right-2 w-4 h-4;
 }
 
-.input-container--sm .input-password-icon {
+.bk-input-container--sm .bk-input-password-icon {
   @apply w-4 h-4;
 }
 
-.input-container--sm .input-phone-selector {
+.bk-input-container--sm .bk-input-phone-selector {
   @apply px-2;
 }
 
-.input-container--sm .input-phone-selector-text {
+.bk-input-container--sm .bk-input-phone-selector-text {
   @apply text-[11px];
 }
 
-.input-container--sm .input-url-prefix {
+.bk-input-container--sm .bk-input-url-prefix {
   @apply py-1.5 px-2.5 text-xs;
 }
 
-.input-container--sm .input-phone-dropdown {
+.bk-input-container--sm .bk-input-phone-dropdown {
   @apply w-[68px] mt-0.5;
 }
 
-.input-container--sm .input-phone-dropdown-item {
+.bk-input-container--sm .bk-input-phone-dropdown-item {
   @apply px-3 py-1.5 text-[11px];
 }
 
-.input-container--sm .input-phone-selector-arrow {
+.bk-input-container--sm .bk-input-phone-selector-arrow {
   @apply w-3 h-3;
 }

package/src/styles.css

@@ -44,3 +44,6 @@
 @import './lib/menu/menu.css';
 @import './lib/ui-avatar-group/ui-avatar-group.css';
 @import './lib/table/table.css';
+@import './lib/calender/components/custom-calendar/custom-calendar.component.css';
+@import './lib/calender/components/scheduled-date-picker/scheduled-date-picker.component.css';
+@import './lib/calender/components/time-picker/time-picker.component.css';