@basis-ng/styles 0.0.1-alpha.152 → 0.0.1-alpha.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/calendar.css +38 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.152",
3
+ "version": "0.0.1-alpha.153",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
package/src/components/calendar.css CHANGED
@@ -1,70 +1,56 @@
1
1
  /* Calendar component styles - simple, utility-first classes matching project conventions */
2
2
  b-calendar {
3
- @apply w-full max-w-[15rem];
3
+ @apply w-full max-w-60 flex flex-col gap-1;
4
4
 
5
5
  header.b-calendar-header {
6
- @apply flex items-center justify-between mb-2;
7
- }
8
-
9
- .b-calendar-title {
10
- @apply font-medium text-sm;
11
- }
12
-
13
- .b-calendar-nav {
14
- @apply inline-flex items-center justify-center w-8 h-8 rounded-size-sm bg-transparent hover:bg-primary/5;
15
- }
16
-
17
- .b-calendar-title {
18
- @apply px-3 py-1 rounded-size-sm text-sm font-medium cursor-pointer text-secondary-foreground bg-transparent;
19
- }
6
+ @apply flex gap-0.5 w-full justify-between;
20
7
 
21
- .b-calendar-title:hover {
22
- @apply bg-primary/5;
23
- }
8
+ .b-calendar-header {
9
+ @apply flex items-center justify-between mb-2;
10
+ }
24
11
 
25
- .b-calendar-title:focus {
26
- @apply outline-none ring-2 ring-primary/10;
27
- }
12
+ .b-calendar-title {
13
+ @apply font-medium text-sm;
14
+ @apply px-3 py-1 rounded-size-sm text-sm font-medium cursor-pointer bg-transparent hover:bg-primary/5 dark:hover:bg-primary-dark/5;
15
+ }
28
16
 
29
- .b-calendar-weekdays {
30
- @apply grid grid-cols-7 gap-1 text-xs text-secondary-foreground mb-1;
31
- }
17
+ .b-calendar-nav {
18
+ @apply inline-flex items-center justify-center w-8 h-8 rounded-size-sm cursor-pointer bg-transparent hover:bg-primary/5 dark:hover:bg-primary-dark/5;
19
+ }
32
20
 
33
- .b-calendar-weekday {
34
- @apply text-center;
21
+ .b-calendar-title:focus {
22
+ @apply outline-none ring-2 ring-primary/10;
23
+ }
35
24
  }
36
25
 
37
- .b-calendar-grid {
38
- @apply grid grid-cols-7 gap-1;
39
- }
26
+ table.b-calendar-table {
27
+ @apply w-full table table-fixed border-collapse;
40
28
 
41
- /* Month and year grid variants (3 columns for better fit) */
42
- .b-calendar-grid--months,
43
- .b-calendar-grid--years {
44
- @apply grid grid-cols-3 gap-2;
45
- }
29
+ .b-calendar-weekday {
30
+ @apply text-xs text-center mb-1;
31
+ }
46
32
 
47
- .b-calendar-grid--months .b-calendar-cell,
48
- .b-calendar-grid--years .b-calendar-cell {
49
- @apply px-2 py-2 text-sm h-10 rounded-size-sm;
50
- }
33
+ .b-calendar-cell {
34
+ @apply text-center rounded-size-sm w-full h-8 place-content-center;
51
35
 
52
- .b-calendar-cell {
53
- @apply aspect-square w-full flex items-center justify-center rounded-size-sm bg-transparent hover:bg-primary/5;
54
- }
36
+ &.b-active {
37
+ @apply bg-primary text-primary-foreground;
38
+ @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
55
39
 
56
- .b-calendar-cell.b-active {
57
- @apply bg-primary text-primary-foreground;
58
- @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
59
- }
40
+ &[data-outside] {
41
+ @apply text-primary-foreground;
42
+ @apply dark:text-primary-foreground-dark;
43
+ }
44
+ }
60
45
 
61
- .b-calendar-cell[data-outside] {
62
- @apply text-secondary-foreground opacity-70;
63
- }
46
+ &[data-outside] {
47
+ @apply opacity-50;
48
+ }
64
49
 
65
- /* If an outside cell is active, ensure it uses the active foreground for legibility */
66
- .b-calendar-cell.b-active[data-outside] {
67
- @apply text-primary-foreground;
68
- @apply dark:text-primary-foreground-dark;
50
+ &:not(.b-active):hover,
51
+ &:not(.b-active):focus {
52
+ @apply bg-primary/5 dark:bg-primary-dark/5 cursor-pointer;
53
+ }
54
+ }
69
55
  }
70
56
  }