@youcan/celeste 0.6.3

package/src/components/dropdown-menu/stories/dropdown-menu.stories.ts

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '@/components/badge/badge.vue';
+import DropdownMenuContent from '../dropdown-menu-content.vue';
+import DropdownMenuGroup from '../dropdown-menu-group.vue';
+import DropdownMenuItem from '../dropdown-menu-item.vue';
+import DropdownMenuLabel from '../dropdown-menu-label.vue';
+import DropdownMenuSeparator from '../dropdown-menu-separator.vue';
+import DropdownMenuSubContent from '../dropdown-menu-sub-content.vue';
+import DropdownMenuSubTrigger from '../dropdown-menu-sub-trigger.vue';
+import DropdownMenuSub from '../dropdown-menu-sub.vue';
+import DropdownMenuTrigger from '../dropdown-menu-trigger.vue';
+import DropdownMenu from '../dropdown-menu.vue';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/Dropdown Menu',
+  component: DropdownMenu,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: {
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuGroup,
+      DropdownMenuItem,
+      DropdownMenuSub,
+      DropdownMenuSeparator,
+      DropdownMenuSubTrigger,
+      DropdownMenuTrigger,
+      DropdownMenuSubContent,
+      DropdownMenuLabel,
+      Badge,
+    },
+    setup() {
+      const badgeProps = {
+        size: 'md',
+        variant: 'light',
+        label: 'Info',
+        state: 'information',
+        type: 'basic',
+      };
+
+      return { args, badgeProps };
+    },
+    template: `
+    <div style="display: flex; align-items: center; justify-content: center;">
+      <DropdownMenu v-bind="args">
+         <DropdownMenuTrigger>
+            <i class="i-celeste-menu-line" />
+         </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuGroup>
+        <DropdownMenuItem label="Item 1" sublabel="(sublabel)" description="wei@alignui.com" />        
+        <DropdownMenuSeparator />
+        
+        <DropdownMenuItem label="Item 2 label is a bit long">
+           <template #prefix>
+              <i class="i-celeste-home-4-line" />
+           </template>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem label="Item 3" disabled>
+          <template #prefix>
+             <i class="i-celeste-global-line" />
+          </template>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem label="Item 4">
+           <template #suffix>
+             <Badge v-bind="badgeProps" />
+           </template>
+        </DropdownMenuItem label="Item 4">
+
+        <DropdownMenuItem label="Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5" sublabel="(sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel)" />
+        
+        <DropdownMenuSeparator />
+        
+        <DropdownMenuLabel>
+        Label
+        </DropdownMenuLabel>
+        
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            Item 6
+          </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+           <DropdownMenuItem label="Sub Item 1" sublabel="(sublabel)" />
+
+           <DropdownMenuItem label="Sub Item 2" />
+
+           <DropdownMenuItem label="Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3" sublabel="(sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel)" />
+        </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+      </DropdownMenu>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<HintTextProps>(), {
+  state: 'default',
+});
+</script>
+
+<script lang="ts">
+export interface HintTextProps {
+  text?: string;
+  icon?: string;
+  class?: HTMLAttributes['class'];
+  state?: 'default' | 'disabled' | 'error';
+}
+</script>
+
+<template>
+  <div
+    :role="props.state === 'error' ? 'alert' : 'note'"
+    :class="clsx(
+      'celeste-hint-text',
+      `celeste-hint-text-${state}`,
+      props.class,
+    )"
+  >
+    <i v-if="icon" :class="icon" />
+    <p v-if="text">
+      {{ text }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.celeste-hint-text {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+
+  i {
+    color: var(--color-icon-soft-400);
+  }
+
+  &-disabled {
+    color: var(--color-text-disabled-300);
+
+    i {
+      color: var(--color-icon-disabled-300);
+    }
+  }
+
+  &-error {
+    color: var(--color-state-error-base);
+
+    i {
+      color: var(--color-state-error-base);
+    }
+  }
+}
+</style>

package/src/components/hint-text/index.ts

@@ -0,0 +1,2 @@
+export * from './hint-text.vue';
+export { default as HintText } from './hint-text.vue';

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import HintText from '../hint-text.vue';
+
+const meta: Meta<typeof HintText> = {
+  title: 'Components/Hint Text',
+  component: HintText,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HintText>;
+
+export const Default: Story = {
+  args: {
+    text: 'This is a hint text to help user.',
+    icon: 'i-celeste-information-fill',
+  },
+
+  render: args => ({
+    components: { HintText },
+    setup() {
+      return { args };
+    },
+    template: `
+      <HintText v-bind="args" />
+    `,
+  }),
+};

package/src/components/index.ts

@@ -0,0 +1,20 @@
+export * from './alert';
+export * from './badge';
+export * from './button';
+export * from './checkbox';
+export * from './content-divider';
+export * from './dropdown';
+export * from './dropdown-menu';
+export * from './hint-text';
+export * from './label';
+export * from './modal';
+export * from './popover';
+export * from './scroll-area';
+export * from './segmented-control';
+export * from './select';
+export * from './slider';
+export * from './switch';
+export * from './tab-menu';
+export * from './text-input';
+export * from './textarea';
+export * from './tooltip';

package/src/components/label/index.ts

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

package/src/components/label/label.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import Tooltip from '@/components/tooltip/tooltip.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { Label, type LabelProps } from 'radix-vue';
+
+const props = defineProps<LabelProps & {
+  sublabel?: string;
+  information?: string;
+  required?: boolean;
+  disabled?: boolean;
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :aria-required="required"
+    :aria-disabled="disabled"
+    :class="clsx('celeste-label', props.class)"
+  >
+    <slot />
+    <slot name="button" class="celeste-label-button" />
+    <span v-if="sublabel" class="celeste-sublabel">{{ sublabel }}</span>
+    <Tooltip
+      v-if="information"
+      :title="information"
+    >
+      <button class="celeste-label-info">
+        <i class="i-celeste-information-2-fill" />
+      </button>
+    </Tooltip>
+  </Label>
+</template>
+
+<style scoped lang="scss">
+.celeste-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+
+  &:has(> a) > *:last-child {
+    flex: 2;
+  }
+
+  &[aria-required='true']::after {
+    content: '*';
+    order: 2;
+    color: var(--color-primary-base);
+  }
+
+  &:not(:has(> .celeste-sublabel, > .celeste-label-info, &[aria-required='true'])) {
+    & > * {
+      flex: none;
+    }
+
+    &[aria-required='false'] {
+      justify-content: space-between;
+    }
+
+    &[aria-required='true']::after {
+      flex: 2;
+    }
+  }
+
+  .celeste-sublabel {
+    order: 3;
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-sm);
+  }
+
+  .celeste-label-info {
+    display: flex;
+    align-items: center;
+    order: 4;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: var(--color-icon-disabled-300);
+  }
+
+  .celeste-label-button {
+    order: 5;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--color-text-disabled-300);
+    pointer-events: none;
+
+    &::after,
+    & > :deep(a),
+    .celeste-sublabel {
+      color: inherit;
+    }
+  }
+}
+</style>

package/src/components/label/stories/label.stories.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { LinkButton } from '@/components/button';
+import TextInput from '@/components/text-input/text-input.vue';
+import Label from '../label.vue';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    for: 'email',
+  },
+
+  render: args => ({
+    components: { Label, TextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 4px; width: 300px; justify-center: center;">
+        <Label v-bind="args">
+          Email Address
+        </Label>
+        <TextInput placeholder="hello@live.fr" type="email" size="sm" id="email" style="width: 100%;" />
+      </div>
+    `,
+  }),
+};
+
+export const Required: Story = {
+  args: {
+    for: 'date',
+    required: true,
+  },
+
+  render: args => ({
+    components: { Label, TextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 4px; width: 300px; justify-center: center;">
+        <Label v-bind="args">
+          Date
+        </Label>
+        <TextInput placeholder="DD / MM / YYYY" type="text" size="sm" id="date" style="width: 100%;" />
+      </div>
+    `,
+  }),
+};
+
+export const Sublabel: Story = {
+  args: {
+    for: 'number',
+    sublabel: '(Optional)',
+  },
+
+  render: args => ({
+    components: { Label, TextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 4px; width: 300px; justify-center: center;">
+        <Label v-bind="args">
+          Phone Number
+        </Label>
+        <TextInput placeholder="+1 (555) 000-000" type="text" size="sm" id="number" style="width: 100%;" />
+      </div>
+    `,
+  }),
+};
+
+export const Information: Story = {
+  args: {
+    for: 'amount',
+    required: true,
+    information: 'Rates may apply',
+  },
+
+  render: args => ({
+    components: { Label, TextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 4px; width: 300px; justify-center: center;">
+        <Label v-bind="args">
+          Amount
+        </Label>
+        <TextInput placeholder="€ 0.00" type="text" size="sm" id="amount" style="width: 100%;" />
+      </div>
+    `,
+  }),
+};
+
+export const Button: Story = {
+  args: {
+    for: 'search',
+  },
+
+  render: args => ({
+    components: { Label, LinkButton, TextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 4px; width: 300px; justify-center: center;">
+        <Label v-bind="args">
+          Search
+          <template #button>
+            <LinkButton intent="gray" href="https://l9aleb-editor.netlify.app/celeste" target="_blank">
+              Help?
+            </LinkButton>
+          </template>
+        </Label>
+        <TextInput placeholder="Search.." type="text" size="sm" id="search" style="width: 100%;" />
+      </div>
+    `,
+  }),
+};

package/src/components/modal/index.ts

@@ -0,0 +1,20 @@
+export * from './modal-body.vue';
+export { default as ModalBody } from './modal-body.vue';
+
+export * from './modal-close.vue';
+export { default as ModalClose } from './modal-close.vue';
+
+export * from './modal-content.vue';
+export { default as ModalContent } from './modal-content.vue';
+
+export * from './modal-footer.vue';
+export { default as ModalFooter } from './modal-footer.vue';
+
+export * from './modal-header.vue';
+export { default as ModalHeader } from './modal-header.vue';
+
+export * from './modal-trigger.vue';
+export { default as ModalTrigger } from './modal-trigger.vue';
+
+export * from './modal.vue';
+export { default as Modal } from './modal.vue';

package/src/components/modal/modal-body.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-modal-body', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-modal-body {
+  padding: var(--spacing-16);
+
+  & + :deep(.celeste-modal-footer) {
+    border-block-start: 1px solid var(--color-stroke-soft-200);
+  }
+}
+</style>

package/src/components/modal/modal-close.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { type DialogCloseProps, DialogClose as ModalClose } from 'radix-vue';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <ModalClose v-bind="props" as-child>
+    <slot />
+  </ModalClose>
+</template>

package/src/components/modal/modal-content.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DialogContentProps & {
+  class?: HTMLAttributes['class'];
+  style: HTMLAttributes['style'];
+}>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ModalPortal>
+    <ModalOverlay class="celeste-modal-overlay" />
+    <Transition name="fade">
+      <ModalContent
+        v-bind="forwarded"
+        :class="clsx('celeste-modal-content', props.class)"
+      >
+        <slot />
+      </ModalContent>
+    </Transition>
+  </ModalPortal>
+</template>
+
+<style scoped lang="scss">
+.celeste-modal-overlay {
+  position: fixed;
+  z-index: 50;
+  background: var(--color-overlay-overlay);
+  backdrop-filter: blur(5px);
+  inset: 0;
+}
+
+.celeste-modal-content {
+  position: fixed;
+  z-index: 51;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-20);
+  background: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-md);
+  translate: -50% -50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all var(--animation-fast) cubic-bezier(0.18, 0.89, 0.43, 1.19);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  visibility: hidden;
+  opacity: 0;
+  scale: 0.95;
+}
+</style>

package/src/components/modal/modal-footer.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    :class="clsx('celeste-modal-footer', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-modal-footer {
+  padding: var(--spacing-16);
+}
+</style>