@react-cupertino-ui/date-picker 1.0.0 → 2.0.0

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 (4) hide show
  1. package/README.md +26 -0
  2. package/package.json +8 -8
  3. package/dist/index.css +0 -195
  4. package/dist/index.scss +0 -214
package/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # @react-cupertino-ui/date-picker
2
+
3
+ DatePicker component from React Cupertino UI
4
+
5
+ part of [React Cupertino UI](https://github.com/Andersonlimahw/react-cupertino-ui)
6
+
7
+ ## Installation
8
+
9
+ npm install @react-cupertino-ui/date-picker
10
+ # or
11
+ pnpm add @react-cupertino-ui/date-picker
12
+ # or
13
+ yarn add @react-cupertino-ui/date-picker
14
+
15
+ ## Usage
16
+
17
+ import { DatePicker } from '@react-cupertino-ui/date-picker';
18
+
19
+ function App() {
20
+ return <DatePicker />;
21
+ }
22
+
23
+ ## Links
24
+ - [Website](http://react-cupertino-ui.pro/)
25
+ - [Storybook](http://react-cupertino-ui.pro/storybook/)
26
+ - [GitHub](https://github.com/Andersonlimahw/react-cupertino-ui)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-cupertino-ui/date-picker",
3
- "version": "1.0.0",
3
+ "version": "2.0.0",
4
4
  "description": "DatePicker component from React Cupertino UI",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -13,18 +13,14 @@
13
13
  "./dist/**/*.css",
14
14
  "./dist/**/*.scss"
15
15
  ],
16
- "scripts": {
17
- "build": "tsc -p tsconfig.build.json && npm run build:styles",
18
- "build:styles": "node ../../../scripts/build-styles.mjs"
19
- },
20
16
  "peerDependencies": {
21
17
  "react": "^18.3.1",
22
18
  "react-dom": "^18.3.1"
23
19
  },
24
20
  "dependencies": {
25
- "@react-cupertino-ui/picker": "workspace:*",
26
- "@react-cupertino-ui/shared": "workspace:*",
27
- "lucide-react": "^0.417.0"
21
+ "lucide-react": "^0.417.0",
22
+ "@react-cupertino-ui/picker": "1.0.1",
23
+ "@react-cupertino-ui/shared": "2.0.0"
28
24
  },
29
25
  "devDependencies": {
30
26
  "typescript": "^5.2.2"
@@ -32,5 +28,9 @@
32
28
  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
33
29
  "publishConfig": {
34
30
  "access": "public"
31
+ },
32
+ "scripts": {
33
+ "build": "tsc -p tsconfig.build.json && npm run build:styles",
34
+ "build:styles": "node ../../../scripts/build-styles.mjs"
35
35
  }
36
36
  }
package/dist/index.css DELETED
@@ -1,195 +0,0 @@
1
- .react-cupertino-ui-date-picker {
2
- --date-picker-bg: rgba(255, 255, 255, 0.78);
3
- position: relative;
4
- display: flex;
5
- flex-direction: column;
6
- gap: 1rem;
7
- padding: 1.25rem;
8
- border-radius: 24px;
9
- background: var(--date-picker-bg);
10
- color: var(--foreground, #0a0a0a);
11
- box-shadow: 0 12px 30px rgba(15, 15, 15, 0.08);
12
- min-width: min(22rem, 100%);
13
- transition: background 200ms ease, box-shadow 200ms ease;
14
- }
15
- .react-cupertino-ui-date-picker.glass {
16
- background: rgba(255, 255, 255, 0.65);
17
- backdrop-filter: blur(var(--glass-blur, 32px)) saturate(var(--glass-saturation, 180%));
18
- -webkit-backdrop-filter: blur(var(--glass-blur, 32px)) saturate(var(--glass-saturation, 180%));
19
- border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
20
- box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
21
- position: relative;
22
- overflow: hidden;
23
- }
24
- .react-cupertino-ui-date-picker.glass::before {
25
- content: "";
26
- position: absolute;
27
- inset: 0;
28
- background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
29
- border-radius: inherit;
30
- opacity: var(--glass-highlight-opacity, 0.95);
31
- pointer-events: none;
32
- mix-blend-mode: screen;
33
- }
34
- .react-cupertino-ui-date-picker.layout-wheel {
35
- flex-direction: row;
36
- align-items: center;
37
- justify-content: center;
38
- gap: 0.75rem;
39
- }
40
- .react-cupertino-ui-date-picker.layout-calendar, .react-cupertino-ui-date-picker.layout-compact {
41
- width: min(22rem, 100%);
42
- }
43
- .react-cupertino-ui-date-picker .picker-column {
44
- flex: 1;
45
- min-width: 60px;
46
- }
47
- .react-cupertino-ui-date-picker .picker-column.year-column {
48
- flex: 1.2;
49
- }
50
- .react-cupertino-ui-date-picker .picker-column.month-column {
51
- flex: 1.5;
52
- }
53
- .react-cupertino-ui-date-picker .picker-column.day-column {
54
- flex: 0.8;
55
- }
56
- .react-cupertino-ui-date-picker .picker-column.hour-column, .react-cupertino-ui-date-picker .picker-column.minute-column {
57
- flex: 1;
58
- }
59
- .react-cupertino-ui-date-picker .picker-column.separator {
60
- flex: 0;
61
- min-width: 10px;
62
- text-align: center;
63
- font-weight: 600;
64
- color: color-mix(in srgb, currentColor, transparent 30%);
65
- }
66
- .react-cupertino-ui-date-picker__calendar {
67
- display: flex;
68
- flex-direction: column;
69
- gap: 0.75rem;
70
- }
71
- .react-cupertino-ui-date-picker__calendar-header {
72
- display: flex;
73
- align-items: center;
74
- justify-content: space-between;
75
- gap: 0.75rem;
76
- }
77
- .react-cupertino-ui-date-picker__month-button {
78
- width: 2.25rem;
79
- height: 2.25rem;
80
- border-radius: 999px;
81
- border: none;
82
- background: rgba(255, 255, 255, 0.3);
83
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
84
- color: inherit;
85
- display: inline-flex;
86
- align-items: center;
87
- justify-content: center;
88
- cursor: pointer;
89
- transition: transform 150ms ease, background 150ms ease;
90
- }
91
- .react-cupertino-ui-date-picker__month-button:disabled {
92
- opacity: 0.4;
93
- cursor: not-allowed;
94
- }
95
- .react-cupertino-ui-date-picker__month-button:active {
96
- transform: scale(0.92);
97
- }
98
- .react-cupertino-ui-date-picker__month-label {
99
- font-size: 1.05rem;
100
- font-weight: 600;
101
- text-transform: capitalize;
102
- }
103
- .react-cupertino-ui-date-picker__weekday-row {
104
- display: grid;
105
- grid-template-columns: repeat(7, minmax(0, 1fr));
106
- gap: 0.35rem;
107
- text-align: center;
108
- }
109
- .react-cupertino-ui-date-picker__weekday {
110
- font-size: 0.75rem;
111
- font-weight: 600;
112
- color: color-mix(in srgb, currentColor, transparent 45%);
113
- text-transform: uppercase;
114
- }
115
- .react-cupertino-ui-date-picker__calendar-grid {
116
- display: grid;
117
- grid-template-columns: repeat(7, minmax(0, 1fr));
118
- gap: 0.35rem;
119
- }
120
- .react-cupertino-ui-date-picker__day {
121
- position: relative;
122
- border: none;
123
- border-radius: 12px;
124
- padding: 0.65rem 0;
125
- background: rgba(255, 255, 255, 0.25);
126
- color: inherit;
127
- font-weight: 500;
128
- cursor: pointer;
129
- transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
130
- }
131
- .react-cupertino-ui-date-picker__day:disabled {
132
- opacity: 0.35;
133
- cursor: not-allowed;
134
- }
135
- .react-cupertino-ui-date-picker__day.is-outside {
136
- opacity: 0.4;
137
- }
138
- .react-cupertino-ui-date-picker__day.is-today {
139
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
140
- }
141
- .react-cupertino-ui-date-picker__day.is-selected {
142
- background: linear-gradient(120deg, #0a84ff 0%, #5ac8fa 100%);
143
- color: white;
144
- box-shadow: 0 12px 28px rgba(10, 132, 255, 0.35);
145
- }
146
- .react-cupertino-ui-date-picker__time-row {
147
- display: flex;
148
- align-items: center;
149
- justify-content: space-between;
150
- gap: 1rem;
151
- }
152
- .react-cupertino-ui-date-picker__time-row label {
153
- display: block;
154
- font-size: 0.8rem;
155
- margin-bottom: 0.25rem;
156
- color: color-mix(in srgb, currentColor, transparent 40%);
157
- }
158
- .react-cupertino-ui-date-picker__time-row select {
159
- width: 100%;
160
- border-radius: 16px;
161
- padding: 0.45rem 0.75rem;
162
- border: 1px solid rgba(0, 0, 0, 0.1);
163
- background: rgba(255, 255, 255, 0.8);
164
- font-size: 0.95rem;
165
- }
166
- .react-cupertino-ui-date-picker__compact {
167
- display: flex;
168
- flex-direction: column;
169
- gap: 0.75rem;
170
- }
171
- .react-cupertino-ui-date-picker__compact-row {
172
- display: grid;
173
- grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
174
- gap: 0.5rem;
175
- }
176
- .react-cupertino-ui-date-picker__compact-row label {
177
- display: block;
178
- font-size: 0.8rem;
179
- margin-bottom: 0.25rem;
180
- color: color-mix(in srgb, currentColor, transparent 40%);
181
- }
182
- .react-cupertino-ui-date-picker__compact-row select {
183
- width: 100%;
184
- border-radius: 999px;
185
- border: 1px solid rgba(0, 0, 0, 0.1);
186
- padding: 0.5rem 0.9rem;
187
- font-size: 0.95rem;
188
- background: rgba(255, 255, 255, 0.9);
189
- transition: border-color 120ms ease;
190
- }
191
- .react-cupertino-ui-date-picker__compact-row select:focus-visible {
192
- outline: none;
193
- border-color: #0a84ff;
194
- box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
195
- }
package/dist/index.scss DELETED
@@ -1,214 +0,0 @@
1
- @use "@/styles/mixins/glass" as glass;
2
-
3
- .react-cupertino-ui-date-picker {
4
- --date-picker-bg: rgba(255, 255, 255, 0.78);
5
- position: relative;
6
- display: flex;
7
- flex-direction: column;
8
- gap: 1rem;
9
- padding: 1.25rem;
10
- border-radius: 24px;
11
- background: var(--date-picker-bg);
12
- color: var(--foreground, #0a0a0a);
13
- box-shadow: 0 12px 30px rgba(15, 15, 15, 0.08);
14
- min-width: min(22rem, 100%);
15
- transition: background 200ms ease, box-shadow 200ms ease;
16
-
17
- &.glass {
18
- @include glass.glass-panel(light, var(--glass-blur, 32px), 0.65);
19
- }
20
-
21
- &.layout-wheel {
22
- flex-direction: row;
23
- align-items: center;
24
- justify-content: center;
25
- gap: 0.75rem;
26
- }
27
-
28
- &.layout-calendar,
29
- &.layout-compact {
30
- width: min(22rem, 100%);
31
- }
32
-
33
- .picker-column {
34
- flex: 1;
35
- min-width: 60px;
36
-
37
- &.year-column {
38
- flex: 1.2;
39
- }
40
-
41
- &.month-column {
42
- flex: 1.5;
43
- }
44
-
45
- &.day-column {
46
- flex: 0.8;
47
- }
48
-
49
- &.hour-column,
50
- &.minute-column {
51
- flex: 1;
52
- }
53
-
54
- &.separator {
55
- flex: 0;
56
- min-width: 10px;
57
- text-align: center;
58
- font-weight: 600;
59
- color: color-mix(in srgb, currentColor, transparent 30%);
60
- }
61
- }
62
-
63
- &__calendar {
64
- display: flex;
65
- flex-direction: column;
66
- gap: 0.75rem;
67
- }
68
-
69
- &__calendar-header {
70
- display: flex;
71
- align-items: center;
72
- justify-content: space-between;
73
- gap: 0.75rem;
74
- }
75
-
76
- &__month-button {
77
- width: 2.25rem;
78
- height: 2.25rem;
79
- border-radius: 999px;
80
- border: none;
81
- background: rgba(255, 255, 255, 0.3);
82
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
83
- color: inherit;
84
- display: inline-flex;
85
- align-items: center;
86
- justify-content: center;
87
- cursor: pointer;
88
- transition: transform 150ms ease, background 150ms ease;
89
-
90
- &:disabled {
91
- opacity: 0.4;
92
- cursor: not-allowed;
93
- }
94
-
95
- &:active {
96
- transform: scale(0.92);
97
- }
98
- }
99
-
100
- &__month-label {
101
- font-size: 1.05rem;
102
- font-weight: 600;
103
- text-transform: capitalize;
104
- }
105
-
106
- &__weekday-row {
107
- display: grid;
108
- grid-template-columns: repeat(7, minmax(0, 1fr));
109
- gap: 0.35rem;
110
- text-align: center;
111
- }
112
-
113
- &__weekday {
114
- font-size: 0.75rem;
115
- font-weight: 600;
116
- color: color-mix(in srgb, currentColor, transparent 45%);
117
- text-transform: uppercase;
118
- }
119
-
120
- &__calendar-grid {
121
- display: grid;
122
- grid-template-columns: repeat(7, minmax(0, 1fr));
123
- gap: 0.35rem;
124
- }
125
-
126
- &__day {
127
- position: relative;
128
- border: none;
129
- border-radius: 12px;
130
- padding: 0.65rem 0;
131
- background: rgba(255, 255, 255, 0.25);
132
- color: inherit;
133
- font-weight: 500;
134
- cursor: pointer;
135
- transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
136
-
137
- &:disabled {
138
- opacity: 0.35;
139
- cursor: not-allowed;
140
- }
141
-
142
- &.is-outside {
143
- opacity: 0.4;
144
- }
145
-
146
- &.is-today {
147
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
148
- }
149
-
150
- &.is-selected {
151
- background: linear-gradient(120deg, #0a84ff 0%, #5ac8fa 100%);
152
- color: white;
153
- box-shadow: 0 12px 28px rgba(10, 132, 255, 0.35);
154
- }
155
- }
156
-
157
- &__time-row {
158
- display: flex;
159
- align-items: center;
160
- justify-content: space-between;
161
- gap: 1rem;
162
-
163
- label {
164
- display: block;
165
- font-size: 0.8rem;
166
- margin-bottom: 0.25rem;
167
- color: color-mix(in srgb, currentColor, transparent 40%);
168
- }
169
-
170
- select {
171
- width: 100%;
172
- border-radius: 16px;
173
- padding: 0.45rem 0.75rem;
174
- border: 1px solid rgba(0, 0, 0, 0.1);
175
- background: rgba(255, 255, 255, 0.8);
176
- font-size: 0.95rem;
177
- }
178
- }
179
-
180
- &__compact {
181
- display: flex;
182
- flex-direction: column;
183
- gap: 0.75rem;
184
- }
185
-
186
- &__compact-row {
187
- display: grid;
188
- grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
189
- gap: 0.5rem;
190
-
191
- label {
192
- display: block;
193
- font-size: 0.8rem;
194
- margin-bottom: 0.25rem;
195
- color: color-mix(in srgb, currentColor, transparent 40%);
196
- }
197
-
198
- select {
199
- width: 100%;
200
- border-radius: 999px;
201
- border: 1px solid rgba(0, 0, 0, 0.1);
202
- padding: 0.5rem 0.9rem;
203
- font-size: 0.95rem;
204
- background: rgba(255, 255, 255, 0.9);
205
- transition: border-color 120ms ease;
206
-
207
- &:focus-visible {
208
- outline: none;
209
- border-color: #0a84ff;
210
- box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
211
- }
212
- }
213
- }
214
- }