@youcan/celeste 0.6.39 → 0.6.40

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 (6) hide show
  1. package/dist/celeste.css +14 -13
  2. package/dist/cjs/digit-input-slot.js +1 -1
  3. package/dist/es/digit-input-slot.js +1 -1
  4. package/package.json +3 -3
  5. package/src/components/digit-input/digit-input-slot.vue +4 -3
  6. package/src/components/digit-input/stories/digit-input.stories.ts +8 -8
package/dist/celeste.css CHANGED
@@ -2386,16 +2386,17 @@ to {
2386
2386
  display: flex;
2387
2387
  align-items: center;
2388
2388
  gap: var(--spacing-10);
2389
- }.celeste-digit-input-slot[data-v-5b5299e2] {
2389
+ }.celeste-digit-input-slot[data-v-86327944] {
2390
2390
  --celeste-digit-input-border-color: var(--color-stroke-soft-200);
2391
2391
  --celeste-digit-input-drop-shadow: var(--shadow-regular-xs);
2392
2392
  --celeste-digit-input-placeholder-color: var(--color-text-soft-400);
2393
2393
  display: flex;
2394
2394
  box-sizing: border-box;
2395
+ flex-grow: 1;
2395
2396
  align-items: center;
2396
2397
  justify-content: center;
2397
- width: 44px;
2398
- height: 44px;
2398
+ width: 64px;
2399
+ height: 64px;
2399
2400
  padding: 0;
2400
2401
  transition: all var(--animation-fast) ease-out;
2401
2402
  border: 1px solid var(--celeste-digit-input-border-color);
@@ -2405,24 +2406,24 @@ to {
2405
2406
  background-color: var(--color-bg-white-0);
2406
2407
  box-shadow: var(--celeste-digit-input-drop-shadow);
2407
2408
  color: var(--color-text-strong-950);
2408
- font: var(--paragraph-sm);
2409
+ font: var(--title-h5-title);
2409
2410
  text-align: center;
2410
2411
  }
2411
- .celeste-digit-input-slot[data-v-5b5299e2]::-moz-placeholder {
2412
+ .celeste-digit-input-slot[data-v-86327944]::-moz-placeholder {
2412
2413
  -moz-transition: color var(--animation-fast) ease-out;
2413
2414
  transition: color var(--animation-fast) ease-out;
2414
2415
  color: var(--celeste-digit-input-placeholder-color);
2415
2416
  }
2416
- .celeste-digit-input-slot[data-v-5b5299e2]::placeholder {
2417
+ .celeste-digit-input-slot[data-v-86327944]::placeholder {
2417
2418
  transition: color var(--animation-fast) ease-out;
2418
2419
  color: var(--celeste-digit-input-placeholder-color);
2419
2420
  }
2420
- .celeste-digit-input-slot[data-v-5b5299e2]:focus {
2421
+ .celeste-digit-input-slot[data-v-86327944]:focus {
2421
2422
  --celeste-digit-input-border-color: var(--color-stroke-strong-950);
2422
2423
  --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
2423
2424
  outline-color: var(--color-stroke-soft-200);
2424
2425
  }
2425
- .celeste-digit-input-slot[data-v-5b5299e2]:disabled {
2426
+ .celeste-digit-input-slot[data-v-86327944]:disabled {
2426
2427
  --celeste-digit-input-border-color: transparent;
2427
2428
  --celeste-digit-input-drop-shadow: none;
2428
2429
  --celeste-digit-input-placeholder-color: var(--color-text-disabled-300);
@@ -2431,20 +2432,20 @@ to {
2431
2432
  color: var(--color-text-disabled-300);
2432
2433
  pointer-events: none;
2433
2434
  }
2434
- .celeste-digit-input-slot[data-v-5b5299e2]:disabled::-moz-placeholder {
2435
+ .celeste-digit-input-slot[data-v-86327944]:disabled::-moz-placeholder {
2435
2436
  color: currentcolor;
2436
2437
  }
2437
- .celeste-digit-input-slot[data-v-5b5299e2]:disabled::placeholder {
2438
+ .celeste-digit-input-slot[data-v-86327944]:disabled::placeholder {
2438
2439
  color: currentcolor;
2439
2440
  }
2440
- [data-error=true] .celeste-digit-input-slot[data-v-5b5299e2] {
2441
+ [data-error=true] .celeste-digit-input-slot[data-v-86327944] {
2441
2442
  --celeste-digit-input-border-color: var(--color-state-error-base);
2442
2443
  }
2443
- [data-error=true] .celeste-digit-input-slot[data-v-5b5299e2]:focus {
2444
+ [data-error=true] .celeste-digit-input-slot[data-v-86327944]:focus {
2444
2445
  --celeste-digit-input-border-color: var(--color-state-error-base);
2445
2446
  outline-color: var(--color-state-error-lighter);
2446
2447
  }
2447
- .celeste-digit-input-slot[data-v-5b5299e2]:hover:not(:focus, :disabled) {
2448
+ .celeste-digit-input-slot[data-v-86327944]:hover:not(:focus, :disabled) {
2448
2449
  --celeste-digit-input-border-color: transparent;
2449
2450
  --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
2450
2451
  background-color: var(--color-bg-weak-50);
package/dist/cjs/digit-input-slot.js CHANGED
@@ -24,5 +24,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
24
24
  };
25
25
  }
26
26
  });
27
- const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5b5299e2"]]);
27
+ const digitInputSlot = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-86327944"]]);
28
28
  module.exports = digitInputSlot;
package/dist/es/digit-input-slot.js CHANGED
@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
23
23
  };
24
24
  }
25
25
  });
26
- const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b5299e2"]]);
26
+ const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-86327944"]]);
27
27
  export {
28
28
  digitInputSlot as default
29
29
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste",
3
3
  "type": "module",
4
- "version": "0.6.39",
4
+ "version": "0.6.40",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "keywords": [
7
7
  "youcan",
@@ -45,8 +45,8 @@
45
45
  "storybook-rtl-addon": "^0.3.3",
46
46
  "tinycolor2": "^1.6.0",
47
47
  "vue-sonner": "^2.0.2",
48
- "@youcan/celeste-icons": "0.6.39",
49
- "@youcan/celeste-tokens": "0.6.39"
48
+ "@youcan/celeste-icons": "0.6.40",
49
+ "@youcan/celeste-tokens": "0.6.40"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@chromatic-com/storybook": "^4.0.0",
package/src/components/digit-input/digit-input-slot.vue CHANGED
@@ -23,10 +23,11 @@ const forwardedProps = useForwardProps(delegatedProps);
23
23
 
24
24
  display: flex;
25
25
  box-sizing: border-box;
26
+ flex-grow: 1;
26
27
  align-items: center;
27
28
  justify-content: center;
28
- width: 44px;
29
- height: 44px;
29
+ width: 64px;
30
+ height: 64px;
30
31
  padding: 0;
31
32
  transition: all var(--animation-fast) ease-out;
32
33
  border: 1px solid var(--celeste-digit-input-border-color);
@@ -36,7 +37,7 @@ const forwardedProps = useForwardProps(delegatedProps);
36
37
  background-color: var(--color-bg-white-0);
37
38
  box-shadow: var(--celeste-digit-input-drop-shadow);
38
39
  color: var(--color-text-strong-950);
39
- font: var(--paragraph-sm);
40
+ font: var(--title-h5-title);
40
41
  text-align: center;
41
42
 
42
43
  &::placeholder {
package/src/components/digit-input/stories/digit-input.stories.ts CHANGED
@@ -57,7 +57,7 @@ export const Default: Story = {
57
57
  return { args, value };
58
58
  },
59
59
  template: `
60
- <DigitInput v-bind="args" v-model="value">
60
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
61
61
  <DigitInputGroup>
62
62
  <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
63
63
  </DigitInputGroup>
@@ -78,7 +78,7 @@ export const WithPlaceholder: Story = {
78
78
  return { args, value };
79
79
  },
80
80
  template: `
81
- <DigitInput v-bind="args" v-model="value">
81
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
82
82
  <DigitInputGroup>
83
83
  <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
84
84
  </DigitInputGroup>
@@ -101,7 +101,7 @@ export const OTPInput: Story = {
101
101
  return { args, value };
102
102
  },
103
103
  template: `
104
- <DigitInput v-bind="args" v-model="value">
104
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
105
105
  <DigitInputGroup>
106
106
  <DigitInputSlot v-for="(item, index) in 6" :key="index" :index="index" />
107
107
  </DigitInputGroup>
@@ -124,7 +124,7 @@ export const PasswordInput: Story = {
124
124
  return { args, value };
125
125
  },
126
126
  template: `
127
- <DigitInput v-bind="args" v-model="value">
127
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
128
128
  <DigitInputGroup>
129
129
  <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
130
130
  </DigitInputGroup>
@@ -146,7 +146,7 @@ export const Disabled: Story = {
146
146
  return { args, value };
147
147
  },
148
148
  template: `
149
- <DigitInput v-bind="args" v-model="value">
149
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
150
150
  <DigitInputGroup>
151
151
  <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
152
152
  </DigitInputGroup>
@@ -167,7 +167,7 @@ export const LongerInput: Story = {
167
167
  return { args, value };
168
168
  },
169
169
  template: `
170
- <DigitInput v-bind="args" v-model="value">
170
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
171
171
  <DigitInputGroup>
172
172
  <DigitInputSlot v-for="(item, index) in 8" :key="index" :index="index" />
173
173
  </DigitInputGroup>
@@ -188,7 +188,7 @@ export const PrefilledValue: Story = {
188
188
  return { args, value };
189
189
  },
190
190
  template: `
191
- <DigitInput v-bind="args" v-model="value">
191
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
192
192
  <DigitInputGroup>
193
193
  <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
194
194
  </DigitInputGroup>
@@ -210,7 +210,7 @@ export const ErrorState: Story = {
210
210
  return { args, value };
211
211
  },
212
212
  template: `
213
- <DigitInput v-bind="args" v-model="value">
213
+ <DigitInput v-bind="args" v-model="value" style="max-width: 640px;">
214
214
  <DigitInputGroup>
215
215
  <DigitInputSlot v-for="(item, index) in 4" :key="index" :index="index" />
216
216
  </DigitInputGroup>