@youcan/celeste 0.17.2 → 0.19.0

package/src/components/color-picker/index.ts

@@ -10,5 +10,8 @@ export { default as ColorPicker } from './color-picker.vue';
 export * from './color-swatch.vue';
 export { default as ColorSwatch } from './color-swatch.vue';
 
+export * from './gradient-picker.vue';
+export { default as GradientPicker } from './gradient-picker.vue';
+
 export * from './hue-slider.vue';
 export { default as HueSlider } from './hue-slider.vue';

package/src/components/color-picker/stories/gradient-picker.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import GradientPicker from '../gradient-picker.vue';
+
+const meta: Meta<typeof GradientPicker> = {
+  title: 'Components/Gradient Picker',
+  component: GradientPicker,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GradientPicker>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { GradientPicker },
+    setup() {
+      const gradient = ref('linear-gradient(135deg, #3B82F6 0%, #EC4899 100%)');
+      return { gradient };
+    },
+    template: `<div style="display: grid; width: 280px; gap: 8px;"><GradientPicker v-model="gradient" /><code>{{ gradient }}</code></div>`,
+  }),
+};
+
+export const Empty: Story = {
+  render: () => ({
+    components: { GradientPicker },
+    setup() {
+      const gradient = ref('');
+      return { gradient };
+    },
+    template: `<div style="display: grid; width: 280px; gap: 8px;"><GradientPicker v-model="gradient" /><code>{{ gradient }}</code></div>`,
+  }),
+};

package/src/components/combobox/combobox-item.vue

@@ -2,7 +2,7 @@
 import type { ComboboxItemEmits } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
+import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { computed } from 'vue';
 import Checkbox from '../checkbox/checkbox.vue';
 
@@ -48,7 +48,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         props.class,
         'celeste-dropdown-item',
         { 'celeste-dropdown-item-disabled': disabled },
-        { 'celeste-dropdown-item-selected': selected },
         { 'celeste-dropdown-item-focused': focused },
       )"
     >
@@ -83,7 +82,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <div v-if="$slots.suffix" class="celeste-dropdown-item-suffix">
         <slot name="suffix" />
       </div>
-      <i v-if="selected" class="i-celeste-check-fill" />
+      <ComboboxItemIndicator as-child>
+        <i class="celeste-dropdown-item-indicator i-celeste-check-line" />
+      </ComboboxItemIndicator>
     </div>
   </ComboboxItem>
 </template>
@@ -91,8 +92,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-item {
   display: flex;
+  position: relative;
   align-items: center;
   padding: var(--spacing-8);
+  padding-inline-end: var(--spacing-36);
   transition-property: background-color;
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
@@ -159,6 +162,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     color: var(--color-icon-sub-600);
   }
 
+  &-indicator {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    inset-inline-end: var(--spacing-8);
+  }
+
   &-disabled {
     color: var(--color-text-disabled-300);
     cursor: not-allowed;
@@ -174,10 +186,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     }
   }
 
-  &-selected {
-    background: var(--color-bg-weak-50);
-  }
-
   .celeste-dropdown-item-info {
     display: flex;
     flex: 1 0 0;

package/src/components/combobox/combobox-list.vue

@@ -39,14 +39,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 div:deep(.celeste-dropdown-content) {
   --dropdown-height: 300px;
   --dropdown-min-width: var(--reka-combobox-trigger-width, 300px);
-  --dropdown-width: max(var(--reka-popper-anchor-width), 300px);
 
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
-  width: var(--dropdown-width);
+  width: max-content;
   min-width: var(--dropdown-min-width);
+  max-width: max(var(--reka-popper-anchor-width), 320px);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);

package/src/components/combobox/combobox-trigger.vue

@@ -197,6 +197,19 @@ const forwarded = useForwardProps(delegatedProps);
     border: none;
     border-radius: 0;
     box-shadow: none;
+    gap: 0;
+
+    :deep(.celeste-dropdown-anchor-trigger-prefix) {
+      margin-inline-end: var(--spacing-8);
+    }
+
+    :deep(.celeste-dropdown-trigger) {
+      margin-inline-start: var(--spacing-2);
+    }
+
+    &.celeste-dropdown-anchor-trigger-filled:not([data-disabled]) :deep(.celeste-dropdown-trigger i) {
+      color: var(--color-icon-sub-600);
+    }
 
     &:deep(.celeste-dropdown-trigger-label) {
       flex: inherit;
@@ -206,6 +219,31 @@ const forwarded = useForwardProps(delegatedProps);
     &[data-state='open'] {
       box-shadow: none;
     }
+
+    &:focus-visible {
+      background: var(--color-bg-weak-50);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-md {
+      padding-inline: var(--spacing-10) var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-sm {
+      padding-inline: var(--spacing-8);
+    }
+
+    &.celeste-dropdown-anchor-trigger-size-xs {
+      padding-inline: var(--spacing-8) var(--spacing-6);
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix) {
+        margin-inline-end: var(--spacing-6);
+      }
+
+      :deep(.celeste-dropdown-anchor-trigger-prefix :is(i, .selected-dropdown-image)) {
+        width: 16px;
+        height: 16px;
+      }
+    }
   }
 
   &.celeste-dropdown-anchor-trigger-type-inline {

package/src/components/combobox/combobox.vue

@@ -253,6 +253,7 @@ const filteredOptions = computed(() => props.ignoreFilter
   align-items: center;
   justify-content: center;
   width: 20px;
+  max-width: none;
   height: 20px;
   object-fit: cover;
   border-radius: var(--radius-full);
@@ -274,6 +275,7 @@ const filteredOptions = computed(() => props.ignoreFilter
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    unicode-bidi: plaintext;
   }
 }
 

package/src/components/text-input/stories/text-input.stories.ts

@@ -73,15 +73,21 @@ export const Size: Story = {
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px" size="md">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
 
         <TextInput v-bind="args" style="width: 300px" size="sm">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
         
         <TextInput v-bind="args" style="width: 300px" size="xs">
-          <i class="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
       </div>
     `,
@@ -361,3 +367,47 @@ export const WithTrailingCombobox: Story = {
     `,
   }),
 };
+
+function flag(color: string): string {
+  return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="${color}"/></svg>`)}`;
+}
+
+const COUNTRIES = [
+  { value: 'MA', label: 'Morocco (+212)', shortLabel: '+212', image: flag('#c1272d') },
+  { value: 'FR', label: 'France (+33)', shortLabel: '+33', image: flag('#002654') },
+  { value: 'US', label: 'United States (+1)', shortLabel: '+1', image: flag('#3c3b6e') },
+];
+
+export const Phone: Story = {
+  args: {
+    type: 'tel',
+    placeholder: '610-101010',
+  },
+
+  render: args => ({
+    components: { TextInput, Combobox },
+    setup() {
+      const country = ref(COUNTRIES[0]);
+      const phone = ref('+212610101010');
+
+      return { args, COUNTRIES, country, phone };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; width: 360px;">
+        <TextInput v-for="size in ['md', 'sm', 'xs']" :key="size" v-bind="args" v-model="phone" :size="size">
+          <template #leadingNode>
+            <Combobox
+              v-model="country"
+              searchable
+              :options="COUNTRIES"
+              :size="size"
+              value-by="value"
+              label-by="shortLabel"
+              type="compact-input"
+            />
+          </template>
+        </TextInput>
+      </div>
+    `,
+  }),
+};

package/src/components/text-input/text-input-affix.vue

@@ -27,18 +27,22 @@ const delegatedProps = useDelegatedProps(props, 'class');
   flex-shrink: 0;
   align-items: center;
   color: var(--celeste-text-input-affix-color);
+  unicode-bidi: plaintext;
 
   &[inline='false'] {
-    padding-inline: var(--spacing-10);
+    padding-inline: var(--input-affix-padding);
     background-color: var(--celeste-text-input-affix-background-color);
   }
 
   &[askbd='true'] {
+    box-sizing: border-box;
     width: fit-content;
-    height: fit-content;
-    padding: var(--spacing-2) calc(var(--spacing-8) - var(--spacing-2));
+    height: 20px;
+    padding-inline: var(--spacing-6);
     border: 1px solid var(--color-stroke-soft-200);
     border-radius: var(--radius-4);
+    background-color: var(--color-bg-white-0);
+    color: var(--celeste-text-input-muted-color);
     font: var(--subheading-xs);
   }
 }

package/src/components/text-input/text-input-button.vue

@@ -37,10 +37,14 @@ const delegatedProps = useDelegatedProps(props, 'class');
   }
 
   &[inline='false'] {
-    padding: var(--spacing-10);
+    padding-inline: var(--spacing-14);
     border-end-start-radius: 0;
     border-start-start-radius: 0;
 
+    &:has(> :only-child:is(i)) {
+      padding-inline: var(--spacing-10);
+    }
+
     &:is(.celeste-button-intent-neutral, .celeste-button-variant-stroke):not(:disabled) {
       background-color: var(--color-bg-white-0);
 
@@ -53,7 +57,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
   &[inline='true'] {
     width: 20px;
     height: 20px;
-    color: var(--celeste-text-input-icon-color) !important;
+    color: var(--celeste-text-input-muted-color) !important;
 
     &:hover {
       background-color: transparent !important;

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

@@ -80,6 +80,7 @@ function clearInput() {
     >
       <TextInputButton
         v-if="showClearButton"
+        inline
         type="button"
         aria-label="Clear search"
         @click="clearInput"
@@ -97,8 +98,9 @@ function clearInput() {
 .celeste-text-input-wrapper {
   --celeste-text-input-border-color: var(--color-stroke-soft-200);
   --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
-  --celeste-text-input-icon-color: var(--color-text-soft-400);
-  --celeste-text-input-affix-color: var(--color-text-soft-400);
+  --celeste-text-input-icon-color: var(--color-text-sub-600);
+  --celeste-text-input-affix-color: var(--color-text-sub-600);
+  --celeste-text-input-muted-color: var(--color-text-soft-400);
   --celeste-text-input-placeholder-color: var(--color-text-soft-400);
   --celeste-text-input-affix-background-color: var(--color-bg-white-0);
 
@@ -106,12 +108,10 @@ function clearInput() {
   box-sizing: border-box;
   align-items: center;
   height: var(--input-height);
-  padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
+  padding-inline: var(--input-padding);
   transition: all var(--animation-fast) ease-out;
   border: 1px solid var(--celeste-text-input-border-color);
   border-radius: var(--input-radius);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   background-color: var(--color-bg-white-0);
   box-shadow: var(--celeste-text-input-drop-shadow);
   color: var(--color-text-strong-950);
@@ -119,24 +119,27 @@ function clearInput() {
   gap: var(--input-gap);
 
   &[size='xs'] {
-    --input-gap: 8px;
+    --input-gap: var(--spacing-6);
     --input-height: 32px;
     --input-radius: var(--radius-8);
-    --input-padding: calc(var(--spacing-8) - var(--spacing-2));
+    --input-padding: var(--spacing-8);
+    --input-affix-padding: var(--spacing-10);
   }
 
   &[size='sm'] {
-    --input-gap: 6px;
+    --input-gap: var(--spacing-8);
     --input-height: 36px;
     --input-radius: var(--radius-8);
-    --input-padding: var(--spacing-8);
+    --input-padding: var(--spacing-10);
+    --input-affix-padding: var(--spacing-10);
   }
 
   &[size='md'] {
-    --input-gap: 6px;
+    --input-gap: var(--spacing-8);
     --input-height: 40px;
     --input-radius: var(--radius-10);
-    --input-padding: var(--spacing-10);
+    --input-padding: var(--spacing-12);
+    --input-affix-padding: var(--spacing-12);
   }
 
   &[has-error='true'] {
@@ -158,6 +161,12 @@ function clearInput() {
       color: var(--celeste-text-input-placeholder-color);
     }
 
+    &[type='tel'] {
+      direction: ltr;
+      text-align: -webkit-match-parent;
+      text-align: match-parent;
+    }
+
     // Hide default webkit search cancel button
     &[type='search'] {
       &::-webkit-search-cancel-button {
@@ -199,18 +208,36 @@ function clearInput() {
     padding-inline-end: 0;
   }
 
+  &:has(.celeste-text-input:placeholder-shown) {
+    --celeste-text-input-icon-color: var(--color-text-soft-400);
+    --celeste-text-input-affix-color: var(--color-text-soft-400);
+  }
+
+  &:hover:not(:has(.celeste-text-input:focus)) {
+    --celeste-text-input-drop-shadow: none;
+
+    &:not([has-error='true'], :has(.celeste-text-input-node)) {
+      --celeste-text-input-border-color: transparent;
+    }
+
+    &:not(:has(.celeste-text-input-node:hover)) {
+      --celeste-text-input-icon-color: var(--color-text-sub-600);
+      --celeste-text-input-placeholder-color: var(--color-text-sub-600);
+
+      background-color: var(--color-bg-weak-50);
+    }
+  }
+
   &:has(.celeste-text-input:focus) {
     --celeste-text-input-border-color: var(--color-stroke-strong-950);
+    --celeste-text-input-drop-shadow: var(--shadow-buttons-important-focus);
     --celeste-text-input-placeholder-color: var(--color-text-sub-600);
     --celeste-text-input-icon-color: var(--color-text-sub-600);
     --celeste-text-input-affix-color: var(--color-text-sub-600);
 
-    outline-color: var(--color-stroke-soft-200);
-
     &[has-error='true'] {
       --celeste-text-input-border-color: var(--color-state-error-base);
-
-      outline-color: var(--color-state-error-lighter);
+      --celeste-text-input-drop-shadow: var(--shadow-buttons-error-focus);
     }
   }
 
@@ -229,35 +256,17 @@ function clearInput() {
     --celeste-text-input-drop-shadow: none;
     --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
     --celeste-text-input-affix-color: var(--color-text-disabled-300);
+    --celeste-text-input-muted-color: var(--color-text-disabled-300);
     --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
     --celeste-text-input-icon-color: var(--color-text-disabled-300);
 
     background-color: var(--color-bg-weak-50);
-    box-shadow: none;
     color: var(--color-text-disabled-300);
     pointer-events: none;
 
     .celeste-text-input::placeholder {
       color: currentcolor;
     }
-
-    .celeste-text-input-clear-button {
-      color: var(--color-text-disabled-300);
-      pointer-events: none;
-    }
-  }
-
-  &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
-    &:not(:has(.celeste-text-input-node)) {
-      --celeste-text-input-border-color: transparent;
-    }
-
-    &:not(:has(.celeste-text-input-node:hover)) {
-      --celeste-text-input-icon-color: var(--color-text-sub-600);
-      --celeste-text-input-placeholder-color: var(--color-text-sub-600);
-
-      background-color: var(--color-bg-weak-50);
-    }
   }
 
   .celeste-text-input-icon {
@@ -274,6 +283,7 @@ function clearInput() {
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
+    margin-inline-end: calc(var(--input-padding) - var(--input-gap));
     border-inline-end: 1px solid var(--color-stroke-soft-200);
     border-start-start-radius: var(--input-radius);
     border-start-end-radius: 0;
@@ -282,6 +292,7 @@ function clearInput() {
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
+    margin-inline-start: calc(var(--input-padding) - var(--input-gap));
     border-inline-start: 1px solid var(--color-stroke-soft-200);
     border-start-start-radius: 0;
     border-start-end-radius: var(--input-radius);

package/src/components/textarea/textarea.vue

@@ -88,7 +88,7 @@ const modelValue = defineModel<string>();
     display: flex;
     position: absolute;
     color: var(--color-text-soft-400);
-    font: var(--subheading-2xs);
+    font: var(--subheading-xxs);
     inset-block-end: var(--spacing);
     inset-inline-end: calc(var(--spacing) + var(--resize-handle-offset));
   }

package/src/utils/gradient.ts

@@ -0,0 +1,90 @@
+export type GradientType = 'linear' | 'radial';
+
+export interface GradientStop {
+  color: string;
+  position: number;
+}
+
+export interface Gradient {
+  type: GradientType;
+  angle: number;
+  shape?: string;
+  stops: GradientStop[];
+}
+
+const DIRECTIONS: Record<string, number> = {
+  'to top': 0,
+  'to top right': 45,
+  'to right top': 45,
+  'to right': 90,
+  'to bottom right': 135,
+  'to right bottom': 135,
+  'to bottom': 180,
+  'to bottom left': 225,
+  'to left bottom': 225,
+  'to left': 270,
+  'to top left': 315,
+  'to left top': 315,
+};
+
+const UNITS: Record<string, number> = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+
+function splitTopLevel(value: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = '';
+
+  for (const char of value) {
+    depth += char === '(' ? 1 : char === ')' ? -1 : 0;
+
+    if (char === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  return [...parts, current.trim()].filter(Boolean);
+}
+
+export function parseGradient(value?: string | null): Gradient | null {
+  const match = /^\s*(linear|radial)-gradient\(([\s\S]*)\)\s*$/i.exec(value ?? '');
+
+  if (!match) {
+    return null;
+  }
+
+  const parts = splitTopLevel(match[2]);
+  const head = parts[0]?.toLowerCase() ?? '';
+  let angle = 180;
+
+  const unit = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(deg|grad|rad|turn)$/.exec(head);
+
+  const shape = /circle|ellipse|closest|farthest|^at /.test(head) ? parts[0] : undefined;
+
+  if (unit || shape || head.startsWith('to ')) {
+    parts.shift();
+    angle = unit ? Math.round(((Number(unit[1]) * UNITS[unit[2]]) % 360 + 360) % 360) : DIRECTIONS[head] ?? angle;
+  }
+
+  const stops = parts.map((part, index) => {
+    const position = /\s(-?\d+(?:\.\d+)?)%$/.exec(part)?.[1];
+
+    return {
+      color: (position === undefined ? part : part.slice(0, part.lastIndexOf(' '))).trim(),
+      position: position === undefined ? Math.round((index / Math.max(parts.length - 1, 1)) * 100) : Number(position),
+    };
+  });
+
+  const type = match[1].toLowerCase() as GradientType;
+
+  return stops.length > 1 ? { type, angle, ...(type === 'radial' && shape && { shape }), stops } : null;
+}
+
+export function stringifyGradient({ type, angle, shape, stops }: Gradient): string {
+  const list = [...stops].sort((a, b) => a.position - b.position).map(stop => `${stop.color} ${stop.position}%`).join(', ');
+
+  return type === 'linear' ? `linear-gradient(${angle}deg, ${list})` : `radial-gradient(${shape ? `${shape}, ` : ''}${list})`;
+}

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './chart';
 export * from './color';
 export * from './crypto';
+export * from './gradient';
 export * from './sonner';