design-system-next 1.0.21

package/src/components/badge/badge.ts

@@ -0,0 +1,43 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const BADGE_VARIANT = ['danger', 'disabled', 'information', 'brand'] as const;
+const BADGE_SIZE = ['small', 'big', 'tiny'] as const;
+const BADGE_POSITION = ['top', 'bottom', 'default'] as const;
+
+export const badgePropTypes = {
+  /**
+   * @description Badge Label
+   */
+  text: {
+    type: String,
+    default: '0',
+  },
+  /**
+   * @description Badge variant
+   */
+  variant: {
+    type: String,
+    validator: (value: (typeof BADGE_VARIANT)[number]) => BADGE_VARIANT.includes(value),
+    default: 'brand',
+  },
+  /**
+   * @description Badge size
+   */
+  size: {
+    type: String,
+    validator: (value: (typeof BADGE_SIZE)[number]) => BADGE_SIZE.includes(value),
+    default: 'small',
+  },
+  /**
+   * @description Badge position (top, bottom, default)
+   */
+  position: {
+    type: String,
+    validator: (value: (typeof BADGE_POSITION)[number]) => BADGE_POSITION.includes(value),
+    default: 'default',
+  },
+};
+
+export type BadgePropTypes = ExtractPropTypes<typeof badgePropTypes>;

package/src/components/badge/badge.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tw-flex tw-gap-2">
+    <slot />
+    <div :class="[badgeElementWrapper]">
+      <section :class="[badgePositionClasses]">
+        <div :class="[badgeClasses, 'tw-flex tw-items-center tw-justify-center']">
+          {{ props.size === 'tiny' ? '' : text }}
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { badgePropTypes } from './badge';
+import { useBadge } from './use-badge';
+
+const props = defineProps(badgePropTypes);
+const { badgeClasses, badgePositionClasses, badgeElementWrapper } = useBadge(props);
+</script>

package/src/components/badge/use-badge.ts

@@ -0,0 +1,52 @@
+import { computed } from 'vue';
+import type { BadgePropTypes } from './badge';
+
+import classNames from 'classnames';
+export const useBadge = (props: BadgePropTypes) => {
+  const { position, size, variant } = props as {
+    size: 'big' | 'small' | 'tiny';
+    variant: 'danger' | 'disabled' | 'information' | 'brand';
+    position: 'top' | 'bottom' | 'default';
+  };
+
+  const badgeClasses = computed(() => {
+    const variantClasses = classNames({
+      'tw-background-color-danger-base tw-text-color-inverted-strong': variant === 'danger',
+      'tw-background-color-disabled tw-text-color-on-fill-disabled ': variant === 'disabled',
+      'tw-background-color-information-base tw-text-color-inverted-strong': variant === 'information',
+      'tw-background-color-brand-base tw-text-color-inverted-strong': variant === 'brand',
+    });
+
+    const sizeClasses = classNames({
+      'tw-label-sm-medium tw-h-[20px] tw-min-w-[20px] tw-rounded-[32px]': size === 'big',
+      'tw-label-xs-medium tw-h-[16px] tw-min-w-[16px] tw-rounded-[32px]': size === 'small',
+      'tw-h-[10px] tw-min-w-[10px] tw-rounded-full': size === 'tiny',
+    });
+
+    return classNames(variantClasses, sizeClasses);
+  });
+
+  const badgePositionClasses = computed(() => {
+    return classNames({
+      'tw-absolute tw--top-1 tw-right-1': position === 'top' && size === 'tiny',
+      ' tw-absolute tw--bottom-1 tw-right-1': position === 'bottom' && size === 'tiny',
+      'tw-absolute tw--top-2 tw--right-1': position === 'top' && size === 'small',
+      ' tw-absolute tw--bottom-2 tw--right-1': position === 'bottom' && size === 'small',
+      'tw-absolute tw--top-3 tw--right-2': position === 'top' && size === 'big',
+      ' tw-absolute tw--bottom-3 tw--right-2': position === 'bottom' && size === 'big',
+    });
+  });
+
+  const badgeElementWrapper = computed(() => {
+    return classNames({
+      'tw-flex tw-items-center tw-gap-2 ': position === 'default',
+      'tw-relative': position === 'top' || position === 'bottom',
+    });
+  });
+
+  return {
+    badgeClasses,
+    badgePositionClasses,
+    badgeElementWrapper,
+  };
+};

package/src/components/button/button.ts

@@ -0,0 +1,64 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const BUTTON_TONES = ['neutral', 'success', 'danger'] as const;
+const BUTTON_SIZES = ['small', 'medium', 'large'] as const;
+const BUTTON_TYPES = ['button', 'submit', 'reset'] as const;
+const BUTTON_STATES = ['base', 'hover', 'pressed', 'focus'] as const;
+const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary'] as const;
+
+export const buttonPropTypes = {
+  /**
+   * @description Button tone
+   */
+  tone: {
+    type: String as PropType<(typeof BUTTON_TONES)[number]>,
+    validator: (value: (typeof BUTTON_TONES)[number]) => BUTTON_TONES.includes(value),
+    default: 'neutral',
+  },
+  /**
+   * @description Button size
+   */
+  size: {
+    type: String as PropType<(typeof BUTTON_SIZES)[number]>,
+    validator: (value: (typeof BUTTON_SIZES)[number]) => BUTTON_SIZES.includes(value),
+    default: 'medium',
+  },
+  /**
+   * @description Native button type
+   */
+  type: {
+    type: String as PropType<(typeof BUTTON_TYPES)[number]>,
+    validator: (value: (typeof BUTTON_TYPES)[number]) => BUTTON_TYPES.includes(value),
+    default: 'button',
+  },
+  /**
+   * @description Button state
+   */
+  state: {
+    type: String as PropType<(typeof BUTTON_STATES)[number]>,
+    validator: (value: (typeof BUTTON_STATES)[number]) => BUTTON_STATES.includes(value),
+    default: 'base',
+  },
+  /**
+   * @description Button Variant
+   */
+  variant: {
+    type: String as PropType<(typeof BUTTON_VARIANTS)[number]>,
+    validator: (value: (typeof BUTTON_VARIANTS)[number]) => BUTTON_VARIANTS.includes(value),
+    default: 'primary',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const buttonEmitTypes = {
+  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+
+export type ButtonPropTypes = ExtractPropTypes<typeof buttonPropTypes>;
+export type ButtonEmitTypes = typeof buttonEmitTypes;
+export type ButtonType = ButtonPropTypes['type'];

package/src/components/button/button.vue

@@ -0,0 +1,25 @@
+<template>
+  <button
+    ref="buttonRef"
+    v-bind="buttonProps"
+    :class="[
+      'tw-inline-flex tw-w-fit tw-min-w-[56px] tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-md tw-outline-none tw-duration-150 tw-ease-in-out',
+      'hover:tw-shadow-button-hover',
+      'active:tw-scale-95',
+      buttonClass,
+    ]"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { buttonEmitTypes, buttonPropTypes } from './button';
+import { useButton } from './use-button';
+
+const props = defineProps(buttonPropTypes);
+const emit = defineEmits(buttonEmitTypes);
+
+const { buttonRef, buttonProps, buttonClass, handleClick } = useButton(props, emit);
+</script>

package/src/components/button/use-button.ts

@@ -0,0 +1,166 @@
+import { computed, ref, ComputedRef } from 'vue';
+import { useElementHover, useMousePressed, useFocus } from '@vueuse/core';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { ButtonEmitTypes, ButtonPropTypes } from './button';
+
+export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitTypes>['emit']) => {
+  const buttonRef = ref<HTMLButtonElement | null>(null);
+  const isHovered = useElementHover(buttonRef);
+  const { pressed } = useMousePressed({ target: buttonRef });
+  const { focused } = useFocus(buttonRef);
+  const { state, type, size, tone, variant, disabled } = props;
+
+  const buttonProps: ComputedRef<Record<string, unknown>> = computed(() => {
+    return {
+      ...(disabled && { ariaDisabled: true }),
+      disabled: disabled,
+      autofocus: state === 'focus',
+      type: type ?? 'button',
+    };
+  });
+
+  const buttonSizeCssClass: ComputedRef<string> = computed(() =>
+    classNames({
+      'tw-px-[4px] tw-py-[6px] tw-font-medium tw-font-size-100 tw-leading-100': size === 'small',
+      'tw-p-[8px] tw-font-medium tw-font-size-100 tw-leading-100': size === 'medium',
+      'tw-px-[8px] tw-py-[12px] tw-font-medium tw-font-size-200 tw-leading-300': size === 'large',
+    }),
+  );
+
+  const buttonTextCssClass: ComputedRef<string> = computed(() => {
+    if (variant === 'secondary' || variant === 'tertiary') {
+      return classNames({
+        'tw-text-color-strong': tone === 'neutral',
+        'tw-text-color-brand-base': tone === 'success',
+        'tw-text-color-danger-base': tone === 'danger',
+      });
+    }
+
+    return classNames({
+      'tw-text-color-strong': tone === 'neutral',
+      'tw-text-color-inverted-strong': tone === 'success' || tone === 'danger',
+    });
+  });
+
+  // #region - Background Css Class
+  const buttonBackgroundCssClass: ComputedRef<string> = computed(() => {
+    if (variant === 'secondary') {
+      return isHovered.value ? 'tw-background-color-hover' : '';
+    }
+
+    if (variant === 'tertiary') {
+      return getTertiaryBackground();
+    }
+
+    return getBackgroundBasedOnState();
+  });
+
+  function getTertiaryBackground(): string {
+    if (pressed.value) {
+      return 'tw-background-color-pressed';
+    }
+
+    return isHovered.value ? 'tw-background-color-hover' : '';
+  }
+
+  function getBackgroundBasedOnState(): string {
+    if (pressed.value) {
+      return getPressedBackground();
+    }
+
+    if (isHovered.value) {
+      return getHoveredBackground();
+    }
+
+    return getDefaultBackground();
+  }
+
+  function getPressedBackground(): string {
+    const backgrounds: Record<string, string> = {
+      neutral: 'tw-background-color-pressed',
+      success: 'tw-background-color-brand-pressed',
+      danger: 'tw-background-color-danger-pressed',
+    };
+
+    return backgrounds[tone] || '';
+  }
+
+  function getHoveredBackground(): string {
+    const backgrounds: Record<string, string> = {
+      neutral: 'tw-background-color-hover',
+      success: 'tw-background-color-success-pressed',
+      danger: 'tw-background-color-danger-hover',
+    };
+
+    return backgrounds[tone] || '';
+  }
+
+  function getDefaultBackground(): string {
+    const backgrounds: Record<string, string> = {
+      neutral: 'tw-background-color-base',
+      success: 'tw-background-color-brand-base',
+      danger: 'tw-background-color-danger-base',
+    };
+
+    return backgrounds[tone] || '';
+  }
+  // #endregion - Background Css Class
+
+  const buttonBorderCssClass: ComputedRef<string> = computed(() => {
+    if (variant === 'primary' || variant === 'tertiary') {
+      if (focused.value) {
+        return 'tw-border-solid tw-border tw-border-white-50';
+      }
+
+      return 'tw-border-solid tw-border tw-border-transparent';
+    }
+
+    return classNames({
+      'tw-border-solid tw-border tw-border-color-base': tone === 'neutral',
+      'tw-border-solid tw-border tw-border-color-brand-base': tone === 'success',
+      'tw-border-solid tw-border tw-border-color-danger-base': tone === 'danger',
+    });
+  });
+
+  const buttonToneCssClass: ComputedRef<string> = computed(() => {
+    return classNames(buttonBackgroundCssClass.value, buttonTextCssClass.value, buttonBorderCssClass.value);
+  });
+
+  const buttonShadowClass: ComputedRef<string> = computed(() => {
+    if (pressed.value) {
+      return 'tw-shadow-button';
+    } else if (focused.value) {
+      return 'tw-shadow-button-active';
+    }
+
+    return '';
+  });
+
+  const buttonAllCssClass: ComputedRef<string> = computed(() => {
+    if (disabled) {
+      return classNames(buttonSizeCssClass.value, 'tw-text-color-disabled');
+    }
+
+    return classNames(buttonSizeCssClass.value, buttonToneCssClass.value, buttonShadowClass.value);
+  });
+
+  const handleClick = (evt: MouseEvent) => {
+    if (disabled) {
+      evt.stopPropagation();
+
+      return;
+    }
+
+    emit('click', evt);
+  };
+
+  return {
+    buttonRef,
+    buttonProps,
+    buttonClass: buttonAllCssClass,
+    handleClick,
+  };
+};

package/src/components/lozenge/lozenge.ts

@@ -0,0 +1,57 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const LOZENGE_TONE = ['pending', 'information', 'success', 'danger', 'neutral', 'caution'] as const;
+
+export const lozengePropTypes = {
+  /**
+   * @description Lozenge Label
+   */
+  label: {
+    type: String,
+    default: 'label',
+  },
+  /**
+   * @description Lozenge tone
+   */
+  tone: {
+    type: String as PropType<(typeof LOZENGE_TONE)[number]>,
+    validator: (value: (typeof LOZENGE_TONE)[number]) => LOZENGE_TONE.includes(value),
+    default: 'plain',
+  },
+  /**
+   * @description Lozenge type (fill or outline)
+   */
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Lozenge removable
+   */
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description avatar image url
+   */
+  url: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @description handler if the lozenge is visible
+   */
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type LozengePropTypes = ExtractPropTypes<typeof lozengePropTypes>;
+export const removeEmitTypes = {
+  onRemove: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+export type RemoveEmitTypes = typeof removeEmitTypes;

package/src/components/lozenge/lozenge.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="visible" :class="[fill ? 'lozenge-fill' : 'lozenge']">
+    <div
+      :class="[
+        'tw-label-xs-medium tw-inline-flex tw-items-center tw-gap-size-spacing-6xs tw-rounded-md tw-border tw-border-solid tw-p-size-spacing-5xs tw-text-xs tw-uppercase',
+        tone,
+      ]"
+    >
+      <div v-if="$slots.icon" class="tw-flex tw-h-3 tw-w-3 tw-items-center tw-overflow-hidden">
+        <slot name="icon" />
+      </div>
+
+      <div v-if="$slots.avatar" class="tw-flex tw-items-center">
+        <slot name="avatar" />
+      </div>
+
+      <div v-if="url && !$slots.avatar" class="tw-h-4 tw-w-4 tw-overflow-hidden">
+        <img class="tw-h-full tw-w-full tw-rounded-full tw-object-cover" :src="url" alt="avatar" />
+      </div>
+
+      <div>{{ label }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { lozengePropTypes } from './lozenge';
+
+defineProps(lozengePropTypes);
+</script>
+
+<style lang="scss" scoped>
+.lozenge {
+  @apply tw-flex tw-flex-wrap tw-rounded-md;
+
+  .pending {
+    @apply tw-text-color-pending-base tw-background-color-pending-weak tw-border-color-pending-base;
+  }
+
+  .information {
+    @apply tw-text-color-information-base tw-background-color-information-weak tw-border-color-information-base;
+  }
+
+  .success {
+    @apply tw-text-color-success-base tw-background-color-success-weak tw-border-color-success-base;
+  }
+
+  .neutral {
+    @apply tw-text-color-base tw-background-color-base tw-border-color-base;
+  }
+
+  .danger {
+    @apply tw-text-color-danger-base tw-background-color-danger-weak tw-border-color-danger-base;
+  }
+
+  .caution {
+    @apply tw-text-color-caution-base tw-background-color-caution-weak tw-border-color-caution-base;
+  }
+
+  .plain {
+    @apply tw-text-color-strong tw-border-color-base tw-background-color;
+  }
+}
+
+.lozenge-fill {
+  @apply tw-flex tw-flex-wrap;
+
+  .pending {
+    @apply tw-background-color-pending-base tw-text-color-strong tw-border-none;
+  }
+
+  .information {
+    @apply tw-background-color-information-base tw-text-color-inverted-strong tw-border-none;
+  }
+
+  .success {
+    @apply tw-background-color-success-base tw-text-color-inverted-strong;
+  }
+
+  .danger {
+    @apply tw-background-color-danger-base tw-text-color-inverted-strong tw-border-none;
+  }
+
+  .neutral {
+    @apply tw-background-color-base tw-text-color-strong tw-border-none;
+  }
+
+  .caution {
+    @apply tw-background-color-caution-base tw-text-color-strong tw-border-none;
+  }
+
+  .plain {
+    @apply tw-text-color-strong tw-background-color tw-border-none;
+  }
+}
+</style>

package/src/components/lozenge/use-lozenge.ts

@@ -0,0 +1,12 @@
+import type { SetupContext } from 'vue';
+import type { RemoveEmitTypes } from './lozenge';
+
+export const useLozenge = (emit: SetupContext<RemoveEmitTypes>['emit']) => {
+  const hanndleRemoveLozenge = (evt: MouseEvent) => {
+    emit('onRemove', evt);
+  };
+
+  return {
+    hanndleRemoveLozenge,
+  };
+};

package/src/components/radio/radio.ts

@@ -0,0 +1,54 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const RADIO_STATES = ['default', 'hover', 'disabled'] as const;
+
+export const radioPropTypes = {
+  /**
+   * @description Radio state
+   */
+  state: {
+    type: String as PropType<(typeof RADIO_STATES)[number]>,
+    validator: (value: (typeof RADIO_STATES)[number]) => RADIO_STATES.includes(value),
+    default: 'default',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Attribute id
+   */
+  id: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @description Value for v-model
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    required: true,
+    default: false,
+  },
+  /**
+   * @description Attribute name
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @description Attribute value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+};
+
+export const radioEmitTypes = ['update:modelValue'];
+
+export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
+export type SwitchEmitTypes = typeof radioEmitTypes;

package/src/components/radio/radio.vue

@@ -0,0 +1,36 @@
+<template>
+  <input
+    :id="props.id"
+    ref="radioRef"
+    v-model="proxyValue"
+    type="radio"
+    :name="props.name"
+    :value="props.value"
+    :disabled="props.disabled"
+    :class="radioClasses"
+  />
+  <label
+    ref="radioRef"
+    :for="props.id"
+    :disabled="props.disabled"
+    :class="[
+      'tw-flex tw-items-center tw-space-x-2',
+      radioLabelClasses
+    ]"
+  >
+    <span :class="indicatorClasses"></span>
+    <slot />
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { radioPropTypes, radioEmitTypes } from "./radio";
+import { useVModel } from "@vueuse/core";
+import { useRadioButton } from "./use-radio";
+
+const props = defineProps(radioPropTypes);
+const emit = defineEmits(radioEmitTypes);
+
+const proxyValue = useVModel(props, "modelValue", emit);
+const { radioRef, radioClasses, indicatorClasses, radioLabelClasses } = useRadioButton(props);
+</script>