@youcan/celeste 0.18.0 → 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/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';