@youcan/celeste 0.6.48 → 0.6.50

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CounterInput from '../counter-input.vue';
+
+const meta: Meta<typeof CounterInput> = {
+  title: 'Components/Input/Counter Input',
+  component: CounterInput,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CounterInput>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 5,
+    max: 10,
+    min: 0,
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    defaultValue: 5,
+    max: 10,
+    min: 0,
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 12px;">
+        <CounterInput v-bind="args" size="md" />
+        <CounterInput v-bind="args" size="sm" />
+        <CounterInput v-bind="args" size="xs" />
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 0,
+    max: 10,
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};
+
+export const hasError: Story = {
+  args: {
+    defaultValue: 5,
+    max: 10,
+    hasError: true,
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};
+
+export const Decimal: Story = {
+  args: {
+    defaultValue: 5,
+    formatOptions: {
+      signDisplay: 'negative',
+      minimumFractionDigits: 1,
+    },
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};
+
+export const Percentage: Story = {
+  args: {
+    defaultValue: 0.05,
+    step: 0.01,
+    formatOptions: {
+      style: 'percent',
+    },
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};
+
+export const Currency: Story = {
+  args: {
+    defaultValue: 5,
+    formatOptions: {
+      style: 'currency',
+      currency: 'MAD',
+      currencyDisplay: 'code',
+      currencySign: 'accounting',
+    },
+  },
+
+  render: args => ({
+    components: { CounterInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <CounterInput v-bind="args" />
+    `,
+  }),
+};

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

@@ -5,7 +5,7 @@ import DigitInputSlot from '../digit-input-slot.vue';
 import DigitInput from '../digit-input.vue';
 
 const meta: Meta<typeof DigitInput> = {
-  title: 'Components/DigitInput',
+  title: 'Components/Input/Digit Input',
   component: DigitInput,
   argTypes: {
     modelValue: {

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './button';
 export * from './checkbox';
 export * from './combobox';
 export * from './content-divider';
+export * from './counter-input';
 export * from './digit-input';
 export * from './dropdown';
 export * from './dropdown-menu';

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

@@ -57,7 +57,7 @@ const props = withDefaults(defineProps<{
 
   display: flex;
   gap: var(--spacing-14);
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   padding: var(--spacing-16);
   border-block-end: 1px solid var(--color-stroke-soft-200);

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

@@ -56,15 +56,10 @@ export interface PopoverContentProps {
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :side-offset="sideOffset"
-      :class="
-        clsx(
-          'celeste-popover-content-wrapper',
-          props.class,
-        )
-      "
+      class="celeste-popover-content-wrapper"
     >
       <div
-        class="celeste-popover-content"
+        :class="clsx('celeste-popover-content', props.class)"
         :style="{ padding: !$slots.default ? 'var(--spacing-16)' : '' }"
       >
         <template v-if="!$slots.default">
@@ -185,6 +180,7 @@ $icon-size-map: (
 
   .celeste-popover-close-button {
     position: absolute;
+    z-index: 50;
     inset-inline-end: var(--spacing-16);
     inset-block-start: var(--spacing-16);
   }

package/src/components/radio-group/index.ts

@@ -1,5 +1,11 @@
+export * from './radio-group-card.vue';
+export { default as RadioGroupCard } from './radio-group-card.vue';
+
 export * from './radio-group-item.vue';
 export { default as RadioGroupItem } from './radio-group-item.vue';
 
+export * from './radio-group-label.vue';
+export { default as RadioGroupLabel } from './radio-group-label.vue';
+
 export * from './radio-group.vue';
 export { default as RadioGroup } from './radio-group.vue';

package/src/components/radio-group/radio-group-card.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { LabelProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { Label, Primitive } from 'radix-vue';
+
+const props = defineProps<LabelProps & {
+  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-radio-card', props.class, {
+        'celeste-radio-card-disabled': disabled,
+      })
+    "
+  >
+    <div
+      v-if="$slots.image || $slots.icon"
+      role="presentation"
+      class="celeste-radio-card-preview"
+      :class="[$slots.image ? 'celeste-radio-card-preview-image' : 'celeste-radio-card-preview-icon']"
+    >
+      <template v-if="$slots.image">
+        <i class="celeste-radio-card-preview-fallback" i-celeste-image-circle-fill />
+        <slot class="i-celeste-image-circle-fill?bg" name="image" />
+      </template>
+
+      <template v-else-if="$slots.icon">
+        <slot name="icon" />
+      </template>
+    </div>
+
+    <div class="celeste-radio-card-content">
+      <div role="presentation">
+        <div role="presentation" class="celeste-radio-card-row">
+          <Primitive as="span" class="celeste-radio-card-label">
+            <slot name="label" />
+          </Primitive>
+
+          <Primitive
+            v-if="$slots.sublabel"
+            as="span"
+            class="celeste-radio-card-sublabel"
+          >
+            <slot name="sublabel" />
+          </Primitive>
+          <Primitive
+            v-if="$slots.badge"
+            as-child
+            class="celeste-radio-card-badge"
+          >
+            <slot :disabled="disabled" name="badge" />
+          </Primitive>
+        </div>
+      </div>
+
+      <Primitive
+        v-if="$slots.description"
+        as="span"
+        class="celeste-radio-card-description"
+      >
+        <slot name="description" />
+      </Primitive>
+    </div>
+
+    <Primitive
+      :disabled="disabled"
+      as-child
+      class="celeste-radio-card-radio"
+    >
+      <slot />
+    </Primitive>
+
+  </Label>
+</template>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.celeste-radio-card {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-16);
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-12);
+  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(--spacing-14);
+
+  &:not(.celeste-radio-card-disabled) {
+    cursor: pointer;
+  }
+
+  &:has([data-state='checked']):not(.celeste-radio-card-disabled) {
+    border-color: var(--color-primary-base);
+    box-shadow: none;
+  }
+
+  &:hover:not(.celeste-radio-card-disabled),
+  &:focus-visible:not(.celeste-radio-card-disabled) {
+    background-color: var(--color-bg-weak-50);
+    box-shadow: none;
+
+    &:not(:has([data-state='checked'])) {
+      border-color: transparent;
+    }
+  }
+}
+
+.celeste-radio-card-preview {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+}
+
+.celeste-radio-card-preview-icon {
+  i {
+    width: 20px;
+    height: 20px;
+    color: var(--color-icon-sub-600);
+  }
+}
+
+.celeste-radio-card-preview-image {
+  border: none;
+
+  i {
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    color: var(--color-icon-sub-600);
+  }
+
+  :deep(img) {
+    z-index: 1000;
+  }
+}
+
+.celeste-radio-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.celeste-radio-card-row {
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-radio-card-label {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-radio-card-sublabel {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-radio-card-description {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-radio-card-disabled {
+  cursor: not-allowed;
+
+  .celeste-radio-card-label {
+    color: var(--color-text-sub-600);
+  }
+
+  .celeste-radio-card-sublabel {
+    color: var(--color-text-soft-400);
+  }
+
+  .celeste-radio-card-description {
+    color: var(--color-text-soft-400);
+  }
+}
+</style>

package/src/components/radio-group/radio-group-label.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { Label, type LabelProps, Primitive } from 'radix-vue';
+
+const props = defineProps<LabelProps & {
+  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-radio-label', props.class)"
+  >
+    <Primitive as-child class="celeste-radio-label-radio">
+      <slot />
+    </Primitive>
+
+    <div role="presentation">
+      <div role="presentation" class="celeste-radio-label-row">
+        <div>
+          <Primitive as="span" class="celeste-radio-label-label">
+            <slot name="label" />
+          </Primitive>
+
+          <Primitive
+            v-if="$slots.sublabel"
+            as="span"
+            class="celeste-radio-label-sublabel"
+          >
+            <slot name="sublabel" />
+          </Primitive>
+        </div>
+
+        <Primitive
+          v-if="$slots.badge"
+          as-child
+          class="celeste-radio-label-badge"
+        >
+          <slot name="badge" />
+        </Primitive>
+      </div>
+
+      <div role="presentation" class="celeste-radio-label-content">
+        <Primitive
+          v-if="$slots.description"
+          as="span"
+          class="celeste-radio-label-description"
+        >
+          <slot name="description" />
+        </Primitive>
+
+        <Primitive
+          v-if="$slots.linkButton"
+          as-child
+          class="celeste-radio-label-link-button"
+        >
+          <slot name="linkButton" />
+        </Primitive>
+      </div>
+    </div>
+  </Label>
+</template>
+
+<style scoped lang="scss">
+.celeste-radio-label {
+  display: flex;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+
+:deep(.celeste-radio-label-radio) {
+  margin-top: var(--spacing-2);
+}
+
+.celeste-radio-label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-radio-label-sublabel {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-radio-label-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-radio-label-link-button {
+  margin-top: var(--spacing-10);
+}
+</style>