@youcan/celeste 0.7.2 → 0.7.3

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.
package/dist/celeste.css CHANGED
@@ -1834,7 +1834,7 @@ to {
1834
1834
  .celeste-text-input-button[inline=true][data-v-8b3cdb5f]:hover {
1835
1835
  background-color: transparent !important;
1836
1836
  }/* stylelint-disable no-descending-specificity */
1837
- .celeste-text-input-wrapper[data-v-4aaec87f] {
1837
+ .celeste-text-input-wrapper[data-v-394fa109] {
1838
1838
  --celeste-text-input-border-color: var(--color-stroke-soft-200);
1839
1839
  --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
1840
1840
  --celeste-text-input-icon-color: var(--color-text-soft-400);
@@ -1857,28 +1857,28 @@ to {
1857
1857
  font: var(--paragraph-sm);
1858
1858
  gap: var(--input-gap);
1859
1859
  }
1860
- .celeste-text-input-wrapper[size=xs][data-v-4aaec87f] {
1860
+ .celeste-text-input-wrapper[size=xs][data-v-394fa109] {
1861
1861
  --input-gap: 8px;
1862
1862
  --input-height: 32px;
1863
1863
  --input-radius: var(--radius-8);
1864
1864
  --input-padding: calc(var(--spacing-8) - var(--spacing-2));
1865
1865
  }
1866
- .celeste-text-input-wrapper[size=sm][data-v-4aaec87f] {
1866
+ .celeste-text-input-wrapper[size=sm][data-v-394fa109] {
1867
1867
  --input-gap: 6px;
1868
1868
  --input-height: 36px;
1869
1869
  --input-radius: var(--radius-8);
1870
1870
  --input-padding: var(--spacing-8);
1871
1871
  }
1872
- .celeste-text-input-wrapper[size=md][data-v-4aaec87f] {
1872
+ .celeste-text-input-wrapper[size=md][data-v-394fa109] {
1873
1873
  --input-gap: 6px;
1874
1874
  --input-height: 40px;
1875
1875
  --input-radius: var(--radius-10);
1876
1876
  --input-padding: var(--spacing-10);
1877
1877
  }
1878
- .celeste-text-input-wrapper[has-error=true][data-v-4aaec87f] {
1878
+ .celeste-text-input-wrapper[has-error=true][data-v-394fa109] {
1879
1879
  --celeste-text-input-border-color: var(--color-state-error-base);
1880
1880
  }
1881
- .celeste-text-input-wrapper .celeste-text-input[data-v-4aaec87f] {
1881
+ .celeste-text-input-wrapper .celeste-text-input[data-v-394fa109] {
1882
1882
  width: 100%;
1883
1883
  height: 100%;
1884
1884
  padding: 0;
@@ -1888,49 +1888,49 @@ to {
1888
1888
  color: inherit;
1889
1889
  font: inherit;
1890
1890
  }
1891
- .celeste-text-input-wrapper .celeste-text-input[data-v-4aaec87f]::-moz-placeholder {
1891
+ .celeste-text-input-wrapper .celeste-text-input[data-v-394fa109]::-moz-placeholder {
1892
1892
  -moz-transition: color var(--animation-fast) ease-out;
1893
1893
  transition: color var(--animation-fast) ease-out;
1894
1894
  color: var(--celeste-text-input-placeholder-color);
1895
1895
  }
1896
- .celeste-text-input-wrapper .celeste-text-input[data-v-4aaec87f]::placeholder {
1896
+ .celeste-text-input-wrapper .celeste-text-input[data-v-394fa109]::placeholder {
1897
1897
  transition: color var(--animation-fast) ease-out;
1898
1898
  color: var(--celeste-text-input-placeholder-color);
1899
1899
  }
1900
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-4aaec87f]::-webkit-search-cancel-button {
1900
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-394fa109]::-webkit-search-cancel-button {
1901
1901
  display: none;
1902
1902
  -webkit-appearance: none;
1903
1903
  appearance: none;
1904
1904
  }
1905
- .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-4aaec87f]::-webkit-search-decoration {
1905
+ .celeste-text-input-wrapper .celeste-text-input[type=search][data-v-394fa109]::-webkit-search-decoration {
1906
1906
  display: none;
1907
1907
  -webkit-appearance: none;
1908
1908
  appearance: none;
1909
1909
  }
1910
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input-leading-node) {
1910
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input-leading-node) {
1911
1911
  padding-inline-start: 0;
1912
1912
  }
1913
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input-trailing-node) {
1913
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input-trailing-node) {
1914
1914
  padding-inline-end: 0;
1915
1915
  }
1916
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input:focus) {
1916
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input:focus) {
1917
1917
  --celeste-text-input-border-color: var(--color-stroke-strong-950);
1918
1918
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
1919
1919
  --celeste-text-input-icon-color: var(--color-text-sub-600);
1920
1920
  --celeste-text-input-affix-color: var(--color-text-sub-600);
1921
1921
  outline-color: var(--color-stroke-soft-200);
1922
1922
  }
1923
- .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-4aaec87f] {
1923
+ .celeste-text-input-wrapper:has(.celeste-text-input:focus)[has-error=true][data-v-394fa109] {
1924
1924
  --celeste-text-input-border-color: var(--color-state-error-base);
1925
1925
  outline-color: var(--color-state-error-lighter);
1926
1926
  }
1927
- .celeste-text-input-wrapper[data-v-4aaec87f] input:-webkit-autofill {
1927
+ .celeste-text-input-wrapper[data-v-394fa109] input:-webkit-autofill {
1928
1928
  -webkit-transition: background-color 5000s ease-in-out 0s;
1929
1929
  transition: background-color 5000s ease-in-out 0s;
1930
1930
  -webkit-background-clip: text;
1931
1931
  background-clip: text;
1932
1932
  }
1933
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input:disabled) {
1933
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input:disabled) {
1934
1934
  --celeste-text-input-border-color: transparent;
1935
1935
  --celeste-text-input-drop-shadow: none;
1936
1936
  --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
@@ -1942,56 +1942,56 @@ to {
1942
1942
  color: var(--color-text-disabled-300);
1943
1943
  pointer-events: none;
1944
1944
  }
1945
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-4aaec87f]::-moz-placeholder {
1945
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-394fa109]::-moz-placeholder {
1946
1946
  color: currentcolor;
1947
1947
  }
1948
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-4aaec87f]::placeholder {
1948
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input[data-v-394fa109]::placeholder {
1949
1949
  color: currentcolor;
1950
1950
  }
1951
- .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-4aaec87f] {
1951
+ .celeste-text-input-wrapper:has(.celeste-text-input:disabled) .celeste-text-input-clear-button[data-v-394fa109] {
1952
1952
  color: var(--color-text-disabled-300);
1953
1953
  pointer-events: none;
1954
1954
  }
1955
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
1955
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node)) {
1956
1956
  --celeste-text-input-border-color: transparent;
1957
1957
  }
1958
- .celeste-text-input-wrapper[data-v-4aaec87f]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
1958
+ .celeste-text-input-wrapper[data-v-394fa109]:has(.celeste-text-input:hover:not(:focus, :disabled)):not(:has(.celeste-text-input-node:hover)) {
1959
1959
  --celeste-text-input-icon-color: var(--color-text-sub-600);
1960
1960
  --celeste-text-input-placeholder-color: var(--color-text-sub-600);
1961
1961
  background-color: var(--color-bg-weak-50);
1962
1962
  }
1963
- .celeste-text-input-wrapper .celeste-text-input-icon[data-v-4aaec87f] {
1963
+ .celeste-text-input-wrapper .celeste-text-input-icon[data-v-394fa109] {
1964
1964
  flex-shrink: 0;
1965
1965
  width: 20px;
1966
1966
  height: 20px;
1967
1967
  transition: all var(--animation-fast) ease-out;
1968
1968
  color: var(--celeste-text-input-icon-color);
1969
1969
  }
1970
- .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-leading-node,
1971
- .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-trailing-node {
1970
+ .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-leading-node,
1971
+ .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-trailing-node {
1972
1972
  height: calc(var(--input-height) - var(--spacing-2)) !important;
1973
1973
  }
1974
- [dir=ltr] .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-leading-node {
1974
+ [dir=ltr] .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-leading-node {
1975
1975
  border-right: 1px solid var(--color-stroke-soft-200) !important;
1976
1976
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
1977
1977
  }
1978
- [dir=ltr] .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-trailing-node {
1978
+ [dir=ltr] .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-trailing-node {
1979
1979
  border-left: 1px solid var(--color-stroke-soft-200) !important;
1980
1980
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
1981
1981
  }
1982
- [dir=rtl] .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-leading-node {
1982
+ [dir=rtl] .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-leading-node {
1983
1983
  border-left: 1px solid var(--color-stroke-soft-200) !important;
1984
1984
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
1985
1985
  }
1986
- [dir=rtl] .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-trailing-node {
1986
+ [dir=rtl] .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-trailing-node {
1987
1987
  border-right: 1px solid var(--color-stroke-soft-200) !important;
1988
1988
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
1989
1989
  }
1990
- .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-leading-node {
1990
+ .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-leading-node {
1991
1991
  border-right: 1px solid var(--color-stroke-soft-200) !important;
1992
1992
  border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
1993
1993
  }
1994
- .celeste-text-input-wrapper[data-v-4aaec87f] .celeste-text-input-node.celeste-text-input-trailing-node {
1994
+ .celeste-text-input-wrapper[data-v-394fa109] .celeste-text-input-node.celeste-text-input-trailing-node {
1995
1995
  border-left: 1px solid var(--color-stroke-soft-200) !important;
1996
1996
  border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
1997
1997
  }.celeste-picker-trigger[data-v-94b97787] {
@@ -109,7 +109,7 @@ var text_input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
109
109
  });
110
110
  //#endregion
111
111
  //#region src/components/text-input/text-input.vue
112
- var text_input_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4aaec87f"]]);
112
+ var text_input_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(text_input_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-394fa109"]]);
113
113
  //#endregion
114
114
  Object.defineProperty(exports, "text_input_default", {
115
115
  enumerable: true,
@@ -1,6 +1,6 @@
1
1
  import { InputHTMLAttributes } from 'vue';
2
2
  export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
3
- type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
3
+ type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date';
4
4
  size?: 'xs' | 'sm' | 'md';
5
5
  hasError?: boolean;
6
6
  }
@@ -29,7 +29,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
29
29
  "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
30
30
  }>, {
31
31
  size: "xs" | "sm" | "md";
32
- type: "text" | "email" | "password" | "search" | "tel" | "url";
32
+ type: "text" | "email" | "password" | "search" | "tel" | "url" | "date";
33
33
  hasError: boolean;
34
34
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
35
35
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -107,6 +107,6 @@ var text_input_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
107
107
  ], 10, _hoisted_1);
108
108
  };
109
109
  }
110
- }), [["__scopeId", "data-v-4aaec87f"]]);
110
+ }), [["__scopeId", "data-v-394fa109"]]);
111
111
  //#endregion
112
112
  export { text_input_default as t };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@youcan/celeste",
3
3
  "type": "module",
4
- "version": "0.7.2",
4
+ "version": "0.7.3",
5
5
  "author": "YouCan <tech@youcan.shop>",
6
6
  "repository": {
7
7
  "type": "git",
@@ -48,8 +48,8 @@
48
48
  "reka-ui": "^2.10.1",
49
49
  "tinycolor2": "^1.6.0",
50
50
  "vue-sonner": "^2.0.9",
51
- "@youcan/celeste-icons": "0.7.2",
52
- "@youcan/celeste-tokens": "0.7.2"
51
+ "@youcan/celeste-tokens": "0.7.3",
52
+ "@youcan/celeste-icons": "0.7.3"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@chromatic-com/storybook": "^4.1.3",
@@ -7,7 +7,8 @@ import { uid } from '@/utils/crypto';
7
7
  import TextInputButton from './text-input-button.vue';
8
8
 
9
9
  export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
10
- type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
10
+ // Remove type: 'date' when the DatePicker component is available
11
+ type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date';
11
12
  size?: 'xs' | 'sm' | 'md';
12
13
  hasError?: boolean;
13
14
  }