@youcan/celeste 0.6.3

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

@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import TextInputAffix from '../text-input-affix.vue';
+import TextInputButton from '../text-input-button.vue';
+import TextInputIcon from '../text-input-icon.vue';
+import TextInput from '../text-input.vue';
+
+const meta: Meta<typeof TextInput> = {
+  title: 'Components/Text Input',
+  component: TextInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Placeholder text...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 10px; width: 300px;">
+        <TextInput v-bind="args" style="width: 100%" />
+      </div>
+    `,
+  }),
+};
+
+export const Icon: Story = {
+  args: {
+    placeholder: 'Placeholder text...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-search-2-line" position="end" />
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    placeholder: 'Placeholder text...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px" size="md">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+        <TextInput v-bind="args" style="width: 300px" size="xs">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const Affix: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px" placeholder="www.example.com">
+          <TextInputAffix>
+            https://
+          </TextInputAffix>
+        </TextInput>
+        <TextInput v-bind="args" style="width: 300px" placeholder="example">
+          <TextInputAffix variant="suffix">
+            @gmail.com
+          </TextInputAffix>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const InlineAffix: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px" placeholder="0.00">
+          <TextInputAffix inline>
+            €
+          </TextInputAffix>
+        </TextInput>
+        <TextInput v-bind="args" style="width: 300px" placeholder="0.00">
+          <TextInputAffix variant="suffix" inline>
+            MAD
+          </TextInputAffix>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const WithKbd: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-search-2-line" />
+          <TextInputAffix variant="suffix" asKbd>
+            ⌘1
+          </TextInputAffix>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Placeholder text...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const HasError: Story = {
+  args: {
+    hasError: true,
+    placeholder: 'Placeholder text...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-user-6-line" />
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const WithButton: Story = {
+  args: {
+    placeholder: 'www.facebook.com',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-links-line" />
+          <TextInputButton>
+            <i class="i-celeste-file-copy-line" />
+          </TextInputButton>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const WithInlineButton: Story = {
+  args: {
+    type: 'password',
+    placeholder: '••••••••••',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args" style="width: 300px">
+          <TextInputIcon icon="i-celeste-lock-2-line" />
+          <TextInputButton inline>
+            <i class="i-celeste-eye-line" />
+          </TextInputButton>
+        </TextInput>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class'];
+  variant?: 'prefix' | 'suffix';
+  inline?: boolean;
+  asKbd?: boolean;
+}>(), {
+  variant: 'prefix',
+});
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <span
+    v-bind="delegatedProps"
+    :class="clsx('celeste-text-input-affix', props.class)"
+  >
+    <slot />
+  </span>
+</template>
+
+<style scoped lang="scss">
+.celeste-text-input-affix {
+  display: flex;
+  align-items: center;
+  height: calc(var(--input-height) - var(--spacing-2));
+  color: var(--color-text-sub-600);
+
+  &[variant='prefix'] {
+    order: -1;
+    border-end-start-radius: var(--input-radius);
+    border-start-start-radius: var(--input-radius);
+  }
+
+  &[variant='suffix'] {
+    border-end-end-radius: var(--input-radius);
+    border-start-end-radius: var(--input-radius);
+  }
+
+  &[inline='false'] {
+    padding-inline: var(--spacing-10);
+    background-color: var(--color-bg-white-0);
+  }
+
+  &[askbd='true'] {
+    width: fit-content;
+    height: fit-content;
+    padding: var(--spacing-2) calc(var(--spacing-8) - var(--spacing-2));
+    border: 1px solid var(--color-stroke-soft-200);
+    border-radius: var(--radius-4);
+    font: var(--subheading-xs);
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Button, { type ButtonProps } from '@/components/button/button.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<Omit</* @vue-ignore */ButtonProps, 'type' | 'size' | 'variant'> & {
+    inline?: boolean;
+  }>(),
+  { inline: false },
+);
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <Button
+    v-bind="delegatedProps"
+    size="sm"
+    intent="neutral"
+    variant="stroke"
+    :class="clsx('celeste-text-input-button', props.class)"
+  >
+    <slot />
+  </Button>
+</template>
+
+<style scoped lang="scss">
+.celeste-text-input-button {
+  height: calc(var(--input-height) - var(--spacing-2));
+  border: none;
+
+  &[inline='false'] {
+    padding: var(--spacing-8);
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+
+    &:is(.celeste-button-intent-neutral, .celeste-button-variant-stroke):not(:disabled) {
+      background-color: var(--color-bg-white-0);
+
+      &:hover {
+        background-color: var(--color-bg-weak-50);
+      }
+    }
+  }
+
+  &[inline='true'] {
+    width: 20px;
+    height: 20px;
+    margin-inline-end: var(--input-padding);
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<{
+  icon: string;
+  position?: 'start' | 'end';
+  class?: HTMLAttributes['class'];
+}>(), {
+  position: 'start',
+});
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <div v-bind="delegatedProps" :class="clsx('celeste-text-input-icon', props.class)">
+    <i :class="icon" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-text-input-icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-sub-600);
+
+  &[position='start'] {
+    order: -1;
+  }
+
+  & > i {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { InputHTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<TextInputProps>(), {
+  type: 'text',
+  size: 'sm',
+  hasError: false,
+});
+
+const modelValue = defineModel<string | number>();
+</script>
+
+<script lang="ts">
+export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
+  type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+  size?: 'xs' | 'sm' | 'md';
+  hasError?: boolean;
+}
+</script>
+
+<template>
+  <label
+    :size="size"
+    :has-error="hasError"
+    class="celeste-text-input-wrapper"
+  >
+    <input
+      v-model="modelValue"
+      v-bind="$attrs"
+      :type="type"
+      :class="clsx('celeste-text-input', props.class)"
+    >
+    <slot />
+  </label>
+</template>
+
+<style scoped lang="scss">
+.celeste-text-input-wrapper {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  width: fit-content;
+  height: var(--input-height);
+  padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--input-radius);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--input-gap);
+
+  &[size='xs'] {
+    --input-gap: 8px;
+    --input-height: 32px;
+    --input-radius: var(--radius-8);
+    --input-padding: calc(var(--spacing-8) - var(--spacing-2));
+  }
+
+  &[size='sm'] {
+    --input-gap: 6px;
+    --input-height: 36px;
+    --input-radius: var(--radius-8);
+    --input-padding: var(--spacing-8);
+  }
+
+  &[size='md'] {
+    --input-gap: 6px;
+    --input-height: 40px;
+    --input-radius: var(--radius-10);
+    --input-padding: var(--spacing-10);
+  }
+
+  &[has-error='true'] {
+    border-color: var(--color-state-error-base);
+  }
+
+  .celeste-text-input {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+
+    &::placeholder {
+      transition: color var(--animation-fast) ease-out;
+      color: var(--color-text-soft-400);
+    }
+  }
+
+  &:has(.celeste-text-input:focus) {
+    border-color: var(--color-stroke-strong-950);
+    outline-color: var(--color-stroke-soft-200);
+
+    &[has-error='true'] {
+      border-color: var(--color-state-error-base);
+      outline-color: var(--color-state-error-lighter);
+    }
+  }
+
+  &:has(.celeste-text-input:disabled) {
+    border-color: transparent;
+    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;
+    }
+
+    &:deep(.celeste-text-input-icon) {
+      color: var(--color-icon-disabled-300);
+    }
+
+    &:deep(.celeste-text-input-affix),
+    &:deep(.celeste-text-input-button) {
+      background-color: var(--color-bg-weak-50) !important;
+      color: var(--color-text-disabled-300);
+    }
+  }
+
+  &:has(.celeste-text-input-button, .celeste-text-input-affix[inline='false'][askbd='false']) {
+    gap: var(--spacing-0);
+    padding-inline-end: var(--spacing-0);
+
+    &:has(.celeste-text-input-button[inline='false'], .celeste-text-input-affix[variant='suffix']) {
+      .celeste-text-input {
+        padding-inline-end: var(--input-padding);
+        border-inline-end: 1px solid var(--color-stroke-soft-200);
+      }
+    }
+
+    &:has(.celeste-text-input-affix[variant='prefix']) {
+      padding-inline: var(--spacing-0) var(--input-padding);
+
+      .celeste-text-input {
+        padding-inline-start: var(--input-padding);
+        border-inline-start: 1px solid var(--color-stroke-soft-200);
+      }
+    }
+
+    &:deep(.celeste-text-input-icon) {
+      &[position='start'] {
+        margin-inline-end: var(--input-gap);
+      }
+
+      &[position='end'] {
+        margin-inline-start: var(--input-gap);
+      }
+    }
+  }
+
+  &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
+      border-color: transparent;
+      background-color: var(--color-bg-weak-50);
+    }
+
+    &:has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
+      background-color: var(--color-bg-weak-50);
+    }
+
+    &:not(:has(.celeste-text-input-button:hover)) {
+      .celeste-text-input::placeholder {
+        color: var(--color-text-sub-600);
+      }
+    }
+  }
+
+  &:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:deep(.celeste-text-input-icon),
+    &:deep(.celeste-text-input-affix) {
+      color: var(--color-text-soft-400);
+    }
+  }
+}
+</style>

package/src/components/textarea/index.ts

@@ -0,0 +1,2 @@
+export * from './textarea.vue';
+export { default as Textarea } from './textarea.vue';

package/src/components/textarea/stories/textarea.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Textarea from '../textarea.vue';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Your Message',
+  },
+
+  render: args => ({
+    components: { Textarea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Textarea v-bind="args" rows="10" />
+    `,
+  }),
+};