@youcan/celeste 0.6.49 → 0.6.50

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/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>

package/src/components/radio-group/stories/radio-group-card.stories.ts

@@ -0,0 +1,297 @@
+// @unocss-include
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '@/components/badge/badge.vue';
+import { ref } from 'vue';
+import RadioGroupCard from '../radio-group-card.vue';
+import RadioGroupItem from '../radio-group-item.vue';
+import RadioGroup from '../radio-group.vue';
+
+const meta: Meta<typeof RadioGroupCard> = {
+  title: 'Components/Radio Group/RadioGroupCard',
+  component: RadioGroupCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroupCard>;
+
+export const Default: Story = {
+  args: {},
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="option1" />
+
+              <template #label>
+                Basic Label
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {},
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="option1" />
+
+              <template #icon>
+                <i i-celeste-user-6-line />
+              </template>
+
+              <template #label>
+                Settings
+              </template>
+
+              <template #sublabel>
+                (Configure options)
+              </template>
+
+              <template #description>
+                Customize your application settings and preferences.
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  args: {},
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="option1" />
+
+              <template #image>
+                <img src="https://placehold.co/48" alt="Preview" />
+              </template>
+
+              <template #label>
+                Image Option
+              </template>
+
+              <template #description>
+                An option with an image preview.
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithBadge: Story = {
+  args: {},
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem, Badge },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="option1" />
+
+              <template #label>
+                Label
+              </template>
+
+              <template #sublabel>
+                (Sublabel)
+              </template>
+
+              <template #badge>
+                <Badge 
+                  label="NEW" 
+                  state="information" 
+                  variant="light" 
+                  size="sm" 
+                />
+              </template>
+
+              <template #description>
+                Access premium features with advanced capabilities.
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem, Badge },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="option1" disabled />
+
+              <template #icon>
+                <i i-celeste-lock-line />
+              </template>
+
+              <template #label>
+                Disabled Option
+              </template>
+
+              <template #description>
+                This option is currently disabled and cannot be selected.
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {},
+
+  render: args => ({
+    components: { RadioGroup, RadioGroupCard, RadioGroupItem, Badge },
+    setup() {
+      const selectedValue = ref();
+      return { args, selectedValue };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
+          <RadioGroup v-model="selectedValue">
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="email" />
+
+              <template #icon>
+                <i i-celeste-mail-line />
+              </template>
+
+              <template #label>
+                Email Notifications
+              </template>
+
+              <template #description>
+                Receive updates via email.
+              </template>
+            </RadioGroupCard>
+
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="push" />
+
+              <template #icon>
+                <i i-celeste-notification-line />
+              </template>
+
+              <template #label>
+                Push Notifications
+              </template>
+
+              <template #badge>
+                <Badge 
+                  label="RECOMMENDED" 
+                  state="success" 
+                  variant="light" 
+                  size="sm" 
+                />
+              </template>
+
+              <template #description>
+                Get instant push notifications on your device.
+              </template>
+            </RadioGroupCard>
+
+            <RadioGroupCard v-bind="args">
+              <RadioGroupItem value="sms" />
+
+              <template #icon>
+                <i i-celeste-message-line />
+              </template>
+
+              <template #label>
+                SMS Notifications
+              </template>
+
+              <template #sublabel>
+                (Required)
+              </template>
+
+              <template #description>
+                Receive notifications via SMS text messages.
+              </template>
+            </RadioGroupCard>
+          </RadioGroup>
+          <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+            <strong>Selected:</strong> {{ selectedValue ? selectedValue : 'None' }}
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};