@youcan/celeste 0.14.0 → 0.15.0

package/dist/celeste.css

@@ -3039,21 +3039,21 @@ to {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-ed0b4dd2] {
+}[data-v-f1dfb246] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-ed0b4dd2] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-ed0b4dd2] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-ed0b4dd2],
-.selected-dropdown-image[data-v-ed0b4dd2] {
+.celeste-dropdown-item-image[data-v-f1dfb246],
+.selected-dropdown-image[data-v-f1dfb246] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3063,7 +3063,7 @@ to {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-trigger-label[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger-label[data-v-f1dfb246] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -3075,12 +3075,12 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger-label span[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger-label span[data-v-f1dfb246] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-dropdown-trigger[data-v-ed0b4dd2] {
+.celeste-dropdown-trigger[data-v-f1dfb246] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -3091,7 +3091,7 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-ed0b4dd2] {
+.celeste-dropdown-inner-input[data-v-f1dfb246] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -3100,7 +3100,7 @@ to {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-ed0b4dd2] {
+.celeste-dropdown-inner-input.sr-only[data-v-f1dfb246] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5952,9 +5952,12 @@ to {
   width: 20px;
   padding: 0;
   transition: transform var(--animation-fast) ease-in-out;
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
   color: var(--sidebar-foreground);
+  text-decoration: none;
   inset-inline-end: var(--spacing-4);
   inset-block-start: var(--spacing-8);
   aspect-ratio: 1;
@@ -6058,10 +6061,14 @@ to {
     height var(--animation-fast) linear,
     padding var(--animation-fast) linear,
     background-color var(--animation-fast);
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
+  color: var(--sidebar-foreground);
   font: var(--label-sm);
   text-align: start;
+  text-decoration: none;
   gap: var(--spacing-8);
 }
 .celeste-sidebar-menu-button:hover {
@@ -6144,9 +6151,12 @@ to {
   overflow: hidden;
   transform: translateX(-1px);
   transition: background-color var(--animation-fast);
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
   color: var(--sidebar-foreground);
+  text-decoration: none;
   gap: var(--spacing-8);
 }
 .celeste-sidebar-menu-sub-button:hover {
@@ -6201,12 +6211,14 @@ to {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  margin-block: 0;
   margin-inline: var(--spacing-16);
   padding-block: var(--spacing-4);
   padding-inline: var(--spacing-10);
   transform: translateX(1px);
   gap: var(--spacing-4);
   border-inline-start: 1px solid var(--sidebar-border);
+  list-style: none;
 }
 [data-collapsible='icon'] .celeste-sidebar-menu-sub {
   display: none;
@@ -6217,7 +6229,10 @@ to {
   flex-direction: column;
   width: 100%;
   min-width: 0;
+  margin: 0;
+  padding: 0;
   gap: var(--spacing-4);
+  list-style: none;
 }
 
 :root {

package/dist/cjs/chunks/combobox.cjs

@@ -32,12 +32,13 @@ var _hoisted_8 = ["src"];
 var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	__name: "combobox",
-	props: {
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
 		options: {},
 		valueBy: {},
 		labelBy: {},
 		placeholder: { default: "Select" },
 		searchPlaceholder: {},
+		searchTerm: {},
 		type: {},
 		size: { default: "md" },
 		emptyLabel: {},
@@ -63,17 +64,21 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 		as: {},
 		name: {},
 		required: { type: Boolean }
-	},
-	emits: [
+	}, {
+		"searchTerm": {},
+		"searchTermModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)([
 		"update:modelValue",
 		"highlight",
 		"update:open"
-	],
+	], ["update:searchTerm"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
+		const searchTerm = (0, vue.useModel)(__props, "searchTerm");
 		const delegatedProps = (0, vue.computed)(() => {
-			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, class: _class, ...delegated } = props;
+			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, searchTerm: _searchTerm, class: _class, ...delegated } = props;
 			return delegated;
 		});
 		const forwarded = require_useForwardPropsEmits.useForwardPropsEmits(delegatedProps, emits);
@@ -107,8 +112,7 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 			...props.badgeProps,
 			disabled: props.disabled
 		}));
-		const searchTerm = (0, vue.ref)("");
-		const filteredOptions = (0, vue.computed)(() => filterFunction(props.options, searchTerm.value));
+		const filteredOptions = (0, vue.computed)(() => props.ignoreFilter ? props.options : filterFunction(props.options, searchTerm.value ?? ""));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)(require_combobox_root.combobox_root_default, (0, vue.mergeProps)((0, vue.unref)(forwarded), { "ignore-filter": "" }), {
 				default: (0, vue.withCtx)(() => [(0, vue.createVNode)(require_combobox_anchor.combobox_anchor_default, { "as-child": "" }, {
@@ -197,7 +201,7 @@ var combobox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue
 });
 //#endregion
 //#region src/components/combobox/combobox.vue
-var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed0b4dd2"]]);
+var combobox_default = /*#__PURE__*/ require__plugin_vue_export_helper._plugin_vue_export_helper_default(combobox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f1dfb246"]]);
 //#endregion
 Object.defineProperty(exports, "combobox_default", {
 	enumerable: true,

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

@@ -7,6 +7,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     labelBy?: string;
     placeholder?: string;
     searchPlaceholder?: string;
+    searchTerm?: string;
     type?: 'normal' | 'compact' | 'inline' | 'compact-input';
     size?: 'xs' | 'sm' | 'md';
     emptyLabel?: string;
@@ -14,6 +15,11 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     searchable?: boolean;
     class?: string;
 }
+type __VLS_Props = ComboboxPropsType;
+type __VLS_ModelProps = {
+    'searchTerm'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_20: {
     selected: ComboboxItemPropsType;
 }, __VLS_22: {
@@ -24,20 +30,22 @@ type __VLS_Slots = {} & {
 } & {
     prefix?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<ComboboxPropsType, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('reka-ui').AcceptableValue) => any;
     "update:open": (value: boolean) => any;
     highlight: (payload: {
         ref: HTMLElement;
         value: import('reka-ui').AcceptableValue;
     } | undefined) => any;
-}, string, import('vue').PublicProps, Readonly<ComboboxPropsType> & Readonly<{
+    "update:searchTerm": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: import('reka-ui').AcceptableValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onHighlight?: ((payload: {
         ref: HTMLElement;
         value: import('reka-ui').AcceptableValue;
     } | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string | undefined) => any) | undefined;
 }>, {
     size: "xs" | "sm" | "md";
     placeholder: string;

package/dist/es/chunks/combobox.js

@@ -10,7 +10,7 @@ import { t as combobox_input_default } from "./combobox-input.js";
 import { t as combobox_item_default } from "./combobox-item.js";
 import { t as combobox_root_default } from "./combobox-root.js";
 import { t as combobox_separator_default } from "./combobox-separator.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
 //#region src/components/combobox/combobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -34,12 +34,13 @@ var _hoisted_8 = ["src"];
 var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "combobox",
-	props: {
+	props: /*@__PURE__*/ mergeModels({
 		options: {},
 		valueBy: {},
 		labelBy: {},
 		placeholder: { default: "Select" },
 		searchPlaceholder: {},
+		searchTerm: {},
 		type: {},
 		size: { default: "md" },
 		emptyLabel: {},
@@ -65,17 +66,21 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		as: {},
 		name: {},
 		required: { type: Boolean }
-	},
-	emits: [
+	}, {
+		"searchTerm": {},
+		"searchTermModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
 		"update:modelValue",
 		"highlight",
 		"update:open"
-	],
+	], ["update:searchTerm"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emits = __emit;
+		const searchTerm = useModel(__props, "searchTerm");
 		const delegatedProps = computed(() => {
-			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, class: _class, ...delegated } = props;
+			const { open, options, valueBy, labelBy, placeholder, searchPlaceholder, type, size, emptyLabel, badgeProps, searchable, searchTerm: _searchTerm, class: _class, ...delegated } = props;
 			return delegated;
 		});
 		const forwarded = useForwardPropsEmits(delegatedProps, emits);
@@ -109,8 +114,7 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			...props.badgeProps,
 			disabled: props.disabled
 		}));
-		const searchTerm = ref("");
-		const filteredOptions = computed(() => filterFunction(props.options, searchTerm.value));
+		const filteredOptions = computed(() => props.ignoreFilter ? props.options : filterFunction(props.options, searchTerm.value ?? ""));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(combobox_root_default, mergeProps(unref(forwarded), { "ignore-filter": "" }), {
 				default: withCtx(() => [createVNode(combobox_anchor_default, { "as-child": "" }, {
@@ -196,6 +200,6 @@ var combobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, 16);
 		};
 	}
-}), [["__scopeId", "data-v-ed0b4dd2"]]);
+}), [["__scopeId", "data-v-f1dfb246"]]);
 //#endregion
 export { combobox_default as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -52,8 +52,8 @@
     "reka-ui": "^2.10.1",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.14.0",
-    "@youcan/celeste-tokens": "0.14.0"
+    "@youcan/celeste-tokens": "0.15.0",
+    "@youcan/celeste-icons": "0.15.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",

package/src/components/combobox/combobox.vue

@@ -4,7 +4,7 @@ import type { BadgeProps } from '../badge/badge.vue';
 import type { ComboboxItemPropsType } from './combobox-item.vue';
 
 import { useForwardPropsEmits } from 'reka-ui';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import Badge from '../badge/badge.vue';
 import ComboboxAnchor from './combobox-anchor.vue';
 import ComboboxEmpty from './combobox-empty.vue';
@@ -22,6 +22,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   labelBy?: string;
   placeholder?: string;
   searchPlaceholder?: string;
+  searchTerm?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
   emptyLabel?: string;
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<ComboboxPropsType>(), {
   size: 'md',
 });
 const emits = defineEmits<ComboboxRootEmits>();
+const searchTerm = defineModel<string>('searchTerm');
 
 const delegatedProps = computed(() => {
   const {
@@ -53,6 +55,7 @@ const delegatedProps = computed(() => {
     emptyLabel,
     badgeProps,
     searchable,
+    searchTerm: _searchTerm,
     class: _class,
     ...delegated
   } = props;
@@ -132,9 +135,9 @@ const mergedBadgeProps = computed(() => ({
   disabled: props.disabled,
 }));
 
-const searchTerm = ref('');
-
-const filteredOptions = computed(() => filterFunction(props.options, searchTerm.value));
+const filteredOptions = computed(() => props.ignoreFilter
+  ? props.options
+  : filterFunction(props.options, searchTerm.value ?? ''));
 </script>
 
 <template>

package/src/components/combobox/stories/combobox.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Combobox from '../combobox.vue';
 
 const meta: Meta<typeof Combobox> = {
@@ -241,3 +241,37 @@ export const Preselected: Story = {
     `,
   }),
 };
+
+export const ControlledSearch: Story = {
+  args: {
+    valueBy: 'id',
+    placeholder: 'Search and select',
+    searchable: true,
+    searchPlaceholder: 'Search Users',
+    ignoreFilter: true,
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValue = ref();
+      const searchTerm = ref('');
+
+      const options = computed(() => OPTIONS.filter(option => option.label
+        .toLowerCase()
+        .startsWith(searchTerm.value.toLowerCase())));
+
+      return { args, selectedValue, searchTerm, options };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" v-model:search-term="searchTerm" :options="options" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Term:</strong> {{ searchTerm || 'None' }}
+          <br>
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/modal/stories/modal.stories.ts

@@ -42,7 +42,7 @@ export const Default: Story = {
           />
           <ModalBody>
             <div style="display: grid; gap: 4px;">
-              <Label label-text="Email address" sublabel="(Optional)" required />
+              <Label sublabel="(Optional)" required>Email address</Label>
               <TextInput type="email" placeholder="hello@live.fr" size="md" />
             </div>
           </ModalBody>
@@ -79,7 +79,7 @@ export const WithoutDescription: Story = {
           />
           <ModalBody>
             <div style="display: grid; gap: 4px;">
-              <Label label-text="Email address" sublabel="(Optional)" required />
+              <Label sublabel="(Optional)" required>Email address</Label>
               <TextInput type="email" placeholder="hello@live.fr" size="md" />
             </div>
           </ModalBody>
@@ -113,7 +113,7 @@ export const WithoutIcon: Story = {
           <ModalHeader title="Email Verification"/>
           <ModalBody>
             <div style="display: grid; gap: 4px;">
-              <Label label-text="Email address" sublabel="(Optional)" required />
+              <Label sublabel="(Optional)" required>Email address</Label>
               <TextInput type="email" placeholder="hello@live.fr" size="md" />
             </div>
           </ModalBody>

package/src/components/sidebar/sidebar-menu-action.vue

@@ -38,9 +38,12 @@ const props = withDefaults(defineProps<SidebarMenuActionProps>(), {
   width: 20px;
   padding: 0;
   transition: transform var(--animation-fast) ease-in-out;
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
   color: var(--sidebar-foreground);
+  text-decoration: none;
   inset-inline-end: var(--spacing-4);
   inset-block-start: var(--spacing-8);
   aspect-ratio: 1;

package/src/components/sidebar/sidebar-menu-button.vue

@@ -51,10 +51,14 @@ const delegatedProps = reactiveOmit(props, 'class', 'variant', 'isActive');
     height var(--animation-fast) linear,
     padding var(--animation-fast) linear,
     background-color var(--animation-fast);
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
+  color: var(--sidebar-foreground);
   font: var(--label-sm);
   text-align: start;
+  text-decoration: none;
   gap: var(--spacing-8);
 }
 

package/src/components/sidebar/sidebar-menu-sub-button.vue

@@ -46,9 +46,12 @@ const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
   overflow: hidden;
   transform: translateX(-1px);
   transition: background-color var(--animation-fast);
+  border: 0;
   border-radius: var(--radius-8);
   outline: none;
+  background: none;
   color: var(--sidebar-foreground);
+  text-decoration: none;
   gap: var(--spacing-8);
 }
 

package/src/components/sidebar/sidebar-menu-sub.vue

@@ -21,12 +21,14 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   min-width: 0;
+  margin-block: 0;
   margin-inline: var(--spacing-16);
   padding-block: var(--spacing-4);
   padding-inline: var(--spacing-10);
   transform: translateX(1px);
   gap: var(--spacing-4);
   border-inline-start: 1px solid var(--sidebar-border);
+  list-style: none;
 }
 
 [data-collapsible='icon'] .celeste-sidebar-menu-sub {

package/src/components/sidebar/sidebar-menu.vue

@@ -22,6 +22,9 @@ const props = defineProps<{
   flex-direction: column;
   width: 100%;
   min-width: 0;
+  margin: 0;
+  padding: 0;
   gap: var(--spacing-4);
+  list-style: none;
 }
 </style>

package/src/components/sidebar/stories/sidebar.stories.ts

@@ -180,7 +180,7 @@ export const Simple: Story = {
     },
     template: `
       <SidebarProvider>
-        <Sidebar collapsible="icon" side="end" v-bind="args">
+        <Sidebar collapsible="icon" v-bind="args">
           <SidebarHeader>
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
@@ -351,7 +351,7 @@ export const Simple: Story = {
 
         <div style="padding: 24px;">
           <SidebarTrigger />
-        <div>
+        </div>
       </SidebarProvider>
     `,
   }),