@youcan/celeste 0.6.52 → 0.6.54

package/dist/cjs/hint-text.js

@@ -32,5 +32,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const hintText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-37aef9f7"]]);
+const hintText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0fde56ef"]]);
 module.exports = hintText;

package/dist/cjs/index.js

@@ -11,6 +11,11 @@ const socialButton = require("./social-button.js");
 const checkboxCard = require("./checkbox-card.js");
 const checkboxLabel = require("./checkbox-label.js");
 const checkbox_vue_vue_type_style_index_0_lang = require("./chunks/checkbox.vue_vue_type_style_index_0_lang.js");
+const alphaSlider_vue_vue_type_script_setup_true_lang = require("./chunks/alpha-slider.js");
+const colorArea = require("./color-area.js");
+const colorPicker = require("./color-picker.js");
+const colorSwatch = require("./color-swatch.js");
+const hueSlider = require("./hue-slider.js");
 const comboboxAnchor_vue_vue_type_script_setup_true_lang = require("./chunks/combobox-anchor.js");
 const comboboxEmpty = require("./combobox-empty.js");
 const comboboxGroup = require("./combobox-group.js");
@@ -90,11 +95,15 @@ const Mo = require("vue");
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Alert: alert,
+  AlphaSlider: alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main,
   Badge: badge,
   Button: button,
   Checkbox: checkbox_vue_vue_type_style_index_0_lang._sfc_main,
   CheckboxCard: checkboxCard,
   CheckboxLabel: checkboxLabel,
+  ColorArea: colorArea,
+  ColorPicker: colorPicker,
+  ColorSwatch: colorSwatch,
   Combobox: combobox,
   ComboboxAnchor: comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main,
   ComboboxEmpty: comboboxEmpty,
@@ -126,6 +135,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   DropdownMenuTrigger: dropdownMenuTrigger,
   FancyButton: fancyButton,
   HintText: hintText,
+  HueSlider: hueSlider,
   Label: label,
   LinkButton: linkButton,
   Modal: modal_vue_vue_type_script_setup_true_lang._sfc_main,
@@ -241,6 +251,11 @@ exports.SocialButton = socialButton;
 exports.CheckboxCard = checkboxCard;
 exports.CheckboxLabel = checkboxLabel;
 exports.Checkbox = checkbox_vue_vue_type_style_index_0_lang._sfc_main;
+exports.AlphaSlider = alphaSlider_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.ColorArea = colorArea;
+exports.ColorPicker = colorPicker;
+exports.ColorSwatch = colorSwatch;
+exports.HueSlider = hueSlider;
 exports.ComboboxAnchor = comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.ComboboxEmpty = comboboxEmpty;
 exports.ComboboxGroup = comboboxGroup;

package/dist/components/combobox/combobox-list.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onFocusOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
 }>, {
-    position: "inline" | "popper";
     sideOffset: number;
     align: import('node_modules/radix-vue/dist/Popper').Align;
+    position: "inline" | "popper";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/dropdown/dropdown.d.ts

@@ -33,11 +33,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     size: "xs" | "sm" | "md";
     type: "normal" | "compact" | "inline" | "compact-input";
     disabled: boolean;
-    multiple: boolean;
+    align: "start" | "end" | "center";
+    position: "top" | "bottom";
     placeholder: string;
+    multiple: boolean;
     searchable: boolean;
-    position: "top" | "bottom";
-    align: "start" | "end" | "center";
     emptyLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
     image?(_: {

package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts

@@ -17,17 +17,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     pointerDownOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent) => any;
     focusOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any;
     interactOutside: (event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any;
-    entryFocus: (event: Event) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
+    entryFocus: (event: Event) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import('node_modules/radix-vue/dist/DismissableLayer').PointerDownOutsideEvent | import('node_modules/radix-vue/dist/DismissableLayer').FocusOutsideEvent) => any) | undefined;
-    onEntryFocus?: ((event: Event) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    onEntryFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './alert';
 export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './color-picker';
 export * from './combobox';
 export * from './content-divider';
 export * from './counter-input';

package/dist/components/popover/popover-content.d.ts

@@ -28,9 +28,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Po
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
-    side: "top" | "right" | "bottom" | "left";
-    dismissible: boolean;
+    side: "left" | "right" | "bottom" | "top";
     showTail: boolean;
+    dismissible: boolean;
     iconSize: "sm" | "md" | "lg" | "xl" | "xxl";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;

package/dist/es/hint-text.js

@@ -31,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hintText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-37aef9f7"]]);
+const hintText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0fde56ef"]]);
 export {
   hintText as default
 };

package/dist/es/index.js

@@ -8,8 +8,13 @@ import LinkButton from "./link-button.js";
 import socialButton from "./social-button.js";
 import checkboxCard from "./checkbox-card.js";
 import checkboxLabel from "./checkbox-label.js";
-import { _ as _sfc_main } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$1 } from "./chunks/combobox-anchor.js";
+import { _ as _sfc_main$1 } from "./chunks/checkbox.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main } from "./chunks/alpha-slider.js";
+import ColorArea from "./color-area.js";
+import colorPicker from "./color-picker.js";
+import ColorSwatch from "./color-swatch.js";
+import HueSlider from "./hue-slider.js";
+import { _ as _sfc_main$2 } from "./chunks/combobox-anchor.js";
 import ComboboxEmpty from "./combobox-empty.js";
 import ComboboxGroup from "./combobox-group.js";
 import ComboboxInput from "./combobox-input.js";
@@ -19,8 +24,8 @@ import ComboboxRoot from "./combobox-root.js";
 import ComboboxSeparator from "./combobox-separator.js";
 import ComboboxTrigger from "./combobox-trigger.js";
 import combobox from "./combobox.js";
-import { _ as _sfc_main$2 } from "./chunks/content-divider.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$3 } from "./chunks/counter-input.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$3 } from "./chunks/content-divider.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$4 } from "./chunks/counter-input.vue_vue_type_style_index_0_lang.js";
 import digitInputGroup from "./digit-input-group.js";
 import digitInputSlot from "./digit-input-slot.js";
 import digitInput from "./digit-input.js";
@@ -34,44 +39,44 @@ import dropdownMenuLabel from "./dropdown-menu-label.js";
 import dropdownMenuSeparator from "./dropdown-menu-separator.js";
 import dropdownMenuSubContent from "./dropdown-menu-sub-content.js";
 import dropdownMenuSubTrigger from "./dropdown-menu-sub-trigger.js";
-import { _ as _sfc_main$4 } from "./chunks/dropdown-menu-sub.js";
+import { _ as _sfc_main$5 } from "./chunks/dropdown-menu-sub.js";
 import dropdownMenuTrigger from "./dropdown-menu-trigger.js";
 import dropdownMenu from "./dropdown-menu.js";
 import hintText from "./hint-text.js";
 import Label from "./label.js";
 import modalBody from "./modal-body.js";
-import { _ as _sfc_main$6 } from "./chunks/modal-close.js";
+import { _ as _sfc_main$7 } from "./chunks/modal-close.js";
 import modalContent from "./modal-content.js";
 import modalFooter from "./modal-footer.js";
 import modalHeader from "./modal-header.js";
-import { _ as _sfc_main$7 } from "./chunks/modal-trigger.js";
-import { _ as _sfc_main$5 } from "./chunks/modal.js";
+import { _ as _sfc_main$8 } from "./chunks/modal-trigger.js";
+import { _ as _sfc_main$6 } from "./chunks/modal.js";
 import PopoverContent from "./popover-content.js";
 import PopoverTrigger from "./popover-trigger.js";
-import { _ as _sfc_main$8 } from "./chunks/popover.js";
+import { _ as _sfc_main$9 } from "./chunks/popover.js";
 import progressBar from "./progress-bar.js";
 import progressCircle from "./progress-circle.js";
 import radioGroupCard from "./radio-group-card.js";
-import { _ as _sfc_main$a } from "./chunks/radio-group-item.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$b } from "./chunks/radio-group-item.vue_vue_type_style_index_0_lang.js";
 import radioGroupLabel from "./radio-group-label.js";
-import { _ as _sfc_main$9 } from "./chunks/radio-group.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$a } from "./chunks/radio-group.vue_vue_type_style_index_0_lang.js";
 import richEditor from "./rich-editor.js";
-import { _ as _sfc_main$b } from "./chunks/scroll-area.js";
+import { _ as _sfc_main$c } from "./chunks/scroll-area.js";
 import segmentedControlItem from "./segmented-control-item.js";
 import segmentedControl from "./segmented-control.js";
 import SelectContent from "./select-content.js";
-import { _ as _sfc_main$d } from "./chunks/select-group.js";
+import { _ as _sfc_main$e } from "./chunks/select-group.js";
 import SelectIcon from "./select-icon.js";
 import SelectItem from "./select-item.js";
 import selectLabel from "./select-label.js";
 import selectSeparator from "./select-separator.js";
 import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
-import { _ as _sfc_main$c } from "./chunks/select.js";
-import { _ as _sfc_main$e } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$d } from "./chunks/select.js";
+import { _ as _sfc_main$f } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
 import SonnerAlert from "./sonner-alert.js";
-import { _ as _sfc_main$f, t as toast$1 } from "./chunks/sonner.js";
-import { _ as _sfc_main$g } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$g, t as toast$1 } from "./chunks/sonner.js";
+import { _ as _sfc_main$h } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
 import tabMenuContent from "./tab-menu-content.js";
 import tabMenuItem from "./tab-menu-item.js";
 import tabMenuList from "./tab-menu-list.js";
@@ -88,13 +93,17 @@ import { markRaw } from "vue";
 const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Alert,
+  AlphaSlider: _sfc_main,
   Badge,
   Button,
-  Checkbox: _sfc_main,
+  Checkbox: _sfc_main$1,
   CheckboxCard: checkboxCard,
   CheckboxLabel: checkboxLabel,
+  ColorArea,
+  ColorPicker: colorPicker,
+  ColorSwatch,
   Combobox: combobox,
-  ComboboxAnchor: _sfc_main$1,
+  ComboboxAnchor: _sfc_main$2,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxInput,
@@ -104,9 +113,9 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   ComboboxSeparator,
   ComboboxTrigger,
   CompactButton,
-  ContentDivider: _sfc_main$2,
+  ContentDivider: _sfc_main$3,
   ContextMenuItem: contextMenuItem,
-  CounterInput: _sfc_main$3,
+  CounterInput: _sfc_main$4,
   DigitInput: digitInput,
   DigitInputGroup: digitInputGroup,
   DigitInputSlot: digitInputSlot,
@@ -118,49 +127,50 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   DropdownMenuItem: dropdownMenuItem,
   DropdownMenuLabel: dropdownMenuLabel,
   DropdownMenuSeparator: dropdownMenuSeparator,
-  DropdownMenuSub: _sfc_main$4,
+  DropdownMenuSub: _sfc_main$5,
   DropdownMenuSubContent: dropdownMenuSubContent,
   DropdownMenuSubTrigger: dropdownMenuSubTrigger,
   DropdownMenuTrigger: dropdownMenuTrigger,
   FancyButton: fancyButton,
   HintText: hintText,
+  HueSlider,
   Label,
   LinkButton,
-  Modal: _sfc_main$5,
+  Modal: _sfc_main$6,
   ModalBody: modalBody,
-  ModalClose: _sfc_main$6,
+  ModalClose: _sfc_main$7,
   ModalContent: modalContent,
   ModalFooter: modalFooter,
   ModalHeader: modalHeader,
-  ModalTrigger: _sfc_main$7,
-  Popover: _sfc_main$8,
+  ModalTrigger: _sfc_main$8,
+  Popover: _sfc_main$9,
   PopoverContent,
   PopoverTrigger,
   ProgressBar: progressBar,
   ProgressCircle: progressCircle,
-  RadioGroup: _sfc_main$9,
+  RadioGroup: _sfc_main$a,
   RadioGroupCard: radioGroupCard,
-  RadioGroupItem: _sfc_main$a,
+  RadioGroupItem: _sfc_main$b,
   RadioGroupLabel: radioGroupLabel,
   RichEditor: richEditor,
-  ScrollArea: _sfc_main$b,
+  ScrollArea: _sfc_main$c,
   SegmentedControl: segmentedControl,
   SegmentedControlItem: segmentedControlItem,
-  Select: _sfc_main$c,
+  Select: _sfc_main$d,
   SelectContent,
-  SelectGroup: _sfc_main$d,
+  SelectGroup: _sfc_main$e,
   SelectIcon,
   SelectItem,
   SelectLabel: selectLabel,
   SelectSeparator: selectSeparator,
   SelectTrigger,
   SelectValue,
-  Slider: _sfc_main$e,
+  Slider: _sfc_main$f,
   SocialButton: socialButton,
-  Sonner: _sfc_main$f,
+  Sonner: _sfc_main$g,
   SonnerAlert,
   StatusBadge: statusBadge,
-  Switch: _sfc_main$g,
+  Switch: _sfc_main$h,
   TabMenu: tabMenu,
   TabMenuContent: tabMenuContent,
   TabMenuItem: tabMenuItem,
@@ -230,15 +240,19 @@ const Celeste = {
 };
 export {
   Alert,
+  _sfc_main as AlphaSlider,
   Badge,
   Button,
   COLOR_NUMBER_VALIDATION_PATTERN,
   Celeste,
-  _sfc_main as Checkbox,
+  _sfc_main$1 as Checkbox,
   checkboxCard as CheckboxCard,
   checkboxLabel as CheckboxLabel,
+  ColorArea,
+  colorPicker as ColorPicker,
+  ColorSwatch,
   combobox as Combobox,
-  _sfc_main$1 as ComboboxAnchor,
+  _sfc_main$2 as ComboboxAnchor,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxInput,
@@ -248,9 +262,9 @@ export {
   ComboboxSeparator,
   ComboboxTrigger,
   CompactButton,
-  _sfc_main$2 as ContentDivider,
+  _sfc_main$3 as ContentDivider,
   contextMenuItem as ContextMenuItem,
-  _sfc_main$3 as CounterInput,
+  _sfc_main$4 as CounterInput,
   DEFAULT_SWATCH,
   digitInput as DigitInput,
   digitInputGroup as DigitInputGroup,
@@ -263,50 +277,51 @@ export {
   dropdownMenuItem as DropdownMenuItem,
   dropdownMenuLabel as DropdownMenuLabel,
   dropdownMenuSeparator as DropdownMenuSeparator,
-  _sfc_main$4 as DropdownMenuSub,
+  _sfc_main$5 as DropdownMenuSub,
   dropdownMenuSubContent as DropdownMenuSubContent,
   dropdownMenuSubTrigger as DropdownMenuSubTrigger,
   dropdownMenuTrigger as DropdownMenuTrigger,
   fancyButton as FancyButton,
   HEX_VALIDATION_PATTERN,
   hintText as HintText,
+  HueSlider,
   Label,
   LinkButton,
-  _sfc_main$5 as Modal,
+  _sfc_main$6 as Modal,
   modalBody as ModalBody,
-  _sfc_main$6 as ModalClose,
+  _sfc_main$7 as ModalClose,
   modalContent as ModalContent,
   modalFooter as ModalFooter,
   modalHeader as ModalHeader,
-  _sfc_main$7 as ModalTrigger,
-  _sfc_main$8 as Popover,
+  _sfc_main$8 as ModalTrigger,
+  _sfc_main$9 as Popover,
   PopoverContent,
   PopoverTrigger,
   progressBar as ProgressBar,
   progressCircle as ProgressCircle,
-  _sfc_main$9 as RadioGroup,
+  _sfc_main$a as RadioGroup,
   radioGroupCard as RadioGroupCard,
-  _sfc_main$a as RadioGroupItem,
+  _sfc_main$b as RadioGroupItem,
   radioGroupLabel as RadioGroupLabel,
   richEditor as RichEditor,
-  _sfc_main$b as ScrollArea,
+  _sfc_main$c as ScrollArea,
   segmentedControl as SegmentedControl,
   segmentedControlItem as SegmentedControlItem,
-  _sfc_main$c as Select,
+  _sfc_main$d as Select,
   SelectContent,
-  _sfc_main$d as SelectGroup,
+  _sfc_main$e as SelectGroup,
   SelectIcon,
   SelectItem,
   selectLabel as SelectLabel,
   selectSeparator as SelectSeparator,
   SelectTrigger,
   SelectValue,
-  _sfc_main$e as Slider,
+  _sfc_main$f as Slider,
   socialButton as SocialButton,
-  _sfc_main$f as Sonner,
+  _sfc_main$g as Sonner,
   SonnerAlert,
   statusBadge as StatusBadge,
-  _sfc_main$g as Switch,
+  _sfc_main$h as Switch,
   tabMenu as TabMenu,
   tabMenuContent as TabMenuContent,
   tabMenuItem as TabMenuItem,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.52",
+  "version": "0.6.54",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.52",
-    "@youcan/celeste-tokens": "0.6.52"
+    "@youcan/celeste-icons": "0.6.54",
+    "@youcan/celeste-tokens": "0.6.54"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/hint-text/hint-text.vue

@@ -35,15 +35,21 @@ export interface HintTextProps {
 <style lang="scss" scoped>
 .celeste-hint-text {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: var(--spacing-4);
   color: var(--color-text-sub-600);
   font: var(--paragraph-xs);
 
   i {
+    flex-shrink: 0;
     color: var(--color-icon-soft-400);
   }
 
+  p {
+    max-width: 65ch;
+    margin: 0;
+  }
+
   &-disabled {
     color: var(--color-text-disabled-300);
 

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from './alert';
 export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './color-picker';
 export * from './combobox';
 export * from './content-divider';
 export * from './counter-input';