@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/app/injections.js

@@ -1,61 +0,0 @@
-import { defineInjection } from "../utils/index.js";
-export const {
-  InjectionKey: InjectionKeyAvatarGroup,
-  inject: injectAvatarGroup,
-  provide: provideAvatarGroup
-} = defineInjection("ui.avatar-group");
-export const {
-  InjectionKey: InjectionKeyButtonGroup,
-  inject: injectButtonGroup,
-  provide: provideButtonGroup
-} = defineInjection("ui.button-group");
-export const {
-  InjectionKey: InjectionKeyFormOptions,
-  inject: injectFormOptions,
-  provide: provideFormOptions
-} = defineInjection("ui.form-options");
-export const {
-  InjectionKey: InjectionKeyFormBus,
-  inject: injectFormBus,
-  provide: provideFormBus
-} = defineInjection("ui.form-bus");
-export const {
-  InjectionKey: InjectionKeyFormItem,
-  inject: injectFormItem,
-  provide: provideFormItem
-} = defineInjection("ui.form-item");
-export const {
-  InjectionKey: InjectionKeyFormInputId,
-  inject: injectFormInputId,
-  provide: provideFormInputId
-} = defineInjection("ui.form-input-id");
-export const {
-  InjectionKey: InjectionKeyFormInputs,
-  inject: injectFormInputs,
-  provide: provideFormInputs
-} = defineInjection("ui.form-inputs");
-export const {
-  InjectionKey: InjectionKeyFormLoading,
-  inject: injectFormLoading,
-  provide: provideFormLoading
-} = defineInjection("ui.form-loading");
-export const {
-  InjectionKey: InjectionKeyFormErrors,
-  inject: injectFormErrors,
-  provide: provideFormErrors
-} = defineInjection("ui.form-errors", null);
-export const {
-  InjectionKey: InjectionKeyLocaleContext,
-  inject: injectLocaleContext,
-  provide: provideLocaleContext
-} = defineInjection("ui.locale-context");
-export const {
-  InjectionKey: InjectionKeyThemeExtension,
-  provide: provideThemeExtension,
-  inject: injectThemeExtension
-} = defineInjection("ui.theme-extension", {});
-export const {
-  InjectionKey: InjectionKeyUnoConfig,
-  provide: provideUnoConfig,
-  inject: injectUnoConfig
-} = defineInjection("ui.uno-config", {});

package/dist/runtime/components/ButtonGroup.vue

@@ -1,46 +0,0 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { buttonGroup } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface ButtonGroupSlots {
-  default?: (props?: {}) => any
-}
-
-type ButtonGroupVariant = VariantProps<typeof buttonGroup>
-
-export interface ButtonGroupProps extends Omit<ComponentAttrs<typeof buttonGroup>, 'ui'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  size?: ButtonGroupVariant['size']
-  orientation?: ButtonGroupVariant['orientation']
-}
-</script>
-
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { provideButtonGroup } from '../app/injections'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<ButtonGroupProps>(), {
-  orientation: 'horizontal',
-})
-
-defineSlots<ButtonGroupSlots>()
-
-provideButtonGroup(computed(() => props))
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('buttonGroup', props))
-</script>
-
-<template>
-  <Primitive :as="props.as" :class="style">
-    <slot></slot>
-  </Primitive>
-</template>

package/dist/runtime/components/FormItem.vue

@@ -1,129 +0,0 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { formItem } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface FormFieldSlots {
-  label?: (props: { label?: string }) => any
-  hint?: (props: { hint?: string }) => any
-  description?: (props: { description?: string }) => any
-  help?: (props: { help?: string }) => any
-  error?: (props: { error?: string | boolean }) => any
-  default?: (props: { error?: string | boolean }) => any
-}
-
-type FormItemVariants = VariantProps<typeof formItem>
-
-export interface FormItemProps extends ComponentAttrs<typeof formItem> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  /** The name of the FormItem. Also used to match form errors. */
-  name?: string
-  /** A regular expression to match form error names. */
-  errorPattern?: RegExp
-  label?: string
-  description?: string
-  help?: string
-  error?: string | boolean
-  hint?: string
-  /**
-   * @default 'md'
-   */
-  size?: FormItemVariants['size']
-  required?: boolean
-  /** If true, validation on input will be active immediately instead of waiting for a blur event. */
-  eagerValidation?: boolean
-  /**
-   * Delay in milliseconds before validating the form on input events.
-   * @default 300
-   */
-  validateOnInputDelay?: number
-}
-</script>
-
-<script setup lang="ts">
-import { Label, Primitive } from 'reka-ui'
-import { computed, ref, useId } from 'vue'
-import { injectFormErrors, provideFormInputId, provideFormItem } from '../app/injections'
-import { useTheme } from '../composables/useTheme'
-
-const props = defineProps<FormItemProps>()
-const slots = defineSlots<FormFieldSlots>()
-
-const id = ref(useId())
-// Copies id's initial value to bind aria-attributes such as aria-describedby.
-// This is required for the RadioGroup component which unsets the id value.
-const ariaId = id.value
-provideFormInputId(id)
-
-const formErrors = injectFormErrors()
-const error = computed(() => {
-  if (props.error)
-    return props.error
-
-  const formError = formErrors?.value.find((error) => {
-    if (error.name && error.name === props.name)
-      return true
-
-    if (error.name && props.errorPattern)
-      return error.name.match(props.errorPattern)
-
-    return false
-  })
-
-  return formError?.message
-})
-
-provideFormItem(computed(() => ({
-  ...props,
-  error: error.value,
-  ariaId,
-})))
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('formItem', props))
-</script>
-
-<template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <div :class="style.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="props.label || slots.label" :class="style.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="style.label({ class: props.ui?.label })">
-          <slot name="label" :label="props.label">
-            {{ props.label }}
-          </slot>
-        </Label>
-        <span v-if="props.hint || slots.hint" :id="`${ariaId}-hint`" :class="style.hint({ class: props.ui?.hint })">
-          <slot name="hint" :hint="props.hint">
-            {{ props.hint }}
-          </slot>
-        </span>
-      </div>
-
-      <p v-if="props.description || slots.description" :id="`${ariaId}-description`" :class="style.description({ class: props.ui?.description })">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-
-    <div :class="(props.label || slots.label || props.description || slots.description) && style.container({ class: props.ui?.container })">
-      <slot :error="error"></slot>
-
-      <p v-if="(typeof error === 'string' && error) || slots.error" :id="`${ariaId}-error`" :class="style.error({ class: props.ui?.error })">
-        <slot name="error" :error="error">
-          {{ error }}
-        </slot>
-      </p>
-      <p v-else :class="style.help({ class: props.ui?.help })">
-        <slot name="help" :help="props.help">
-          {{ help }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
-</template>

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -1,5 +0,0 @@
-import type { ButtonProps } from '../types/index.js';
-export declare function useButtonGroup(props?: Pick<ButtonProps, 'size'>): {
-    size: import("vue").ComputedRef<any>;
-    orientation: import("vue").ComputedRef<any>;
-};

package/dist/runtime/composables/useButtonGroup.js

@@ -1,9 +0,0 @@
-import { computed } from "vue";
-import { injectButtonGroup } from "../app/injections.js";
-export function useButtonGroup(props = {}) {
-  const buttonGroup = injectButtonGroup();
-  return {
-    size: computed(() => props.size ?? buttonGroup?.value.size),
-    orientation: computed(() => buttonGroup?.value.orientation)
-  };
-}

package/dist/runtime/composables/useFormItem.d.ts

@@ -1,27 +0,0 @@
-import type { GetObjectField } from '../types/index.js';
-interface Props<T> {
-    id?: string;
-    name?: string;
-    size?: GetObjectField<T, 'size'>;
-    highlight?: boolean;
-    disabled?: boolean;
-}
-export declare function useFormItem<T>(props?: Props<T>, options?: {
-    bind?: boolean;
-    deferInputValidation?: boolean;
-}): {
-    id: import("vue").ComputedRef<string | undefined>;
-    name: import("vue").ComputedRef<string | undefined>;
-    size: import("vue").ComputedRef<any>;
-    highlight: import("vue").ComputedRef<boolean | undefined>;
-    disabled: import("vue").ComputedRef<boolean | undefined>;
-    emitFormBlur: () => void;
-    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
-    emitFormChange: () => void;
-    emitFormFocus: () => void;
-    ariaAttrs: import("vue").ComputedRef<{
-        'aria-describedby': string;
-        'aria-invalid': boolean;
-    } | undefined>;
-};
-export {};

package/dist/runtime/composables/useFormItem.js

@@ -1,64 +0,0 @@
-import { useDebounceFn } from "@vueuse/core";
-import { computed } from "vue";
-import {
-  injectFormBus,
-  injectFormInputId,
-  injectFormInputs,
-  injectFormItem,
-  injectFormOptions
-} from "../app/injections.js";
-export function useFormItem(props, options) {
-  const formOptions = injectFormOptions();
-  const formBus = injectFormBus();
-  const formItem = injectFormItem();
-  const formInputs = injectFormInputs();
-  const inputId = injectFormInputId();
-  if (formItem && inputId) {
-    if (options?.bind === false) {
-      inputId.value = void 0;
-    } else if (props?.id) {
-      inputId.value = props?.id;
-    }
-    if (formInputs && formItem.value.name && inputId.value)
-      formInputs.value[formItem.value.name] = { id: inputId.value, pattern: formItem.value.errorPattern };
-  }
-  function emitFormEvent(type, name, eager) {
-    if (formBus && formItem && name)
-      formBus.emit({ type, name, eager });
-  }
-  function emitFormBlur() {
-    emitFormEvent("blur", formItem?.value.name);
-  }
-  function emitFormFocus() {
-    emitFormEvent("focus", formItem?.value.name);
-  }
-  function emitFormChange() {
-    emitFormEvent("change", formItem?.value.name);
-  }
-  const emitFormInput = useDebounceFn(
-    () => {
-      emitFormEvent("input", formItem?.value.name, !options?.deferInputValidation || formItem?.value.eagerValidation);
-    },
-    formItem?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
-  );
-  return {
-    id: computed(() => props?.id ?? inputId?.value),
-    name: computed(() => props?.name ?? formItem?.value.name),
-    size: computed(() => props?.size ?? formItem?.value.size),
-    highlight: computed(() => formItem?.value.error ? true : props?.highlight),
-    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
-    emitFormBlur,
-    emitFormInput,
-    emitFormChange,
-    emitFormFocus,
-    ariaAttrs: computed(() => {
-      if (!formItem?.value)
-        return;
-      const descriptiveAttrs = ["error", "hint", "help", "description"].filter((type) => formItem?.value?.[type]).map((type) => `${formItem?.value.ariaId}-${type}`) || [];
-      return {
-        "aria-describedby": descriptiveAttrs.join(" "),
-        "aria-invalid": !!formItem?.value.error
-      };
-    })
-  };
-}

package/dist/runtime/composables/useTheme.d.ts

@@ -1,9 +0,0 @@
-import * as uiTheme from '../theme/index.js';
-import type { StylerProps, StylerReturnType, StylerTheme } from '../types/index.js';
-type UITheme = typeof uiTheme;
-export declare const useTheme: () => {
-    theme: import("vue").ComputedRef<typeof uiTheme>;
-    createStyler: <V extends import("@byyuurin/ui-kit").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit").ClassValue = undefined, S extends import("@byyuurin/ui-kit").CVSlots = undefined>(theme: import("@byyuurin/ui-kit").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit").VariantProps<import("@byyuurin/ui-kit").CVReturnType<V, S, B>> & import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; } : (props?: import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; };
-    generateStyle: <T extends keyof UITheme>(name: T, props?: StylerProps<UITheme[T]>) => StylerReturnType<StylerTheme<UITheme[T]>>;
-};
-export {};

package/dist/runtime/composables/useTheme.js

@@ -1,23 +0,0 @@
-import { transformUnoRules } from "@byyuurin/ui/unocss";
-import { createSharedComposable } from "@vueuse/core";
-import { computed, toValue } from "vue";
-import { injectThemeExtension, injectUnoConfig } from "../app/injections.js";
-import * as uiTheme from "../theme/index.js";
-import { extendTheme, prepareStyler } from "../utils/index.js";
-export const useTheme = createSharedComposable(() => {
-  const themeExtension = injectThemeExtension();
-  const unoConfig = injectUnoConfig();
-  const mergeRules = transformUnoRules(toValue(unoConfig));
-  const { createStyler } = prepareStyler(mergeRules);
-  const themeDefaults = JSON.parse(JSON.stringify(uiTheme));
-  const theme = computed(() => extendTheme(toValue(themeExtension), themeDefaults));
-  function generateStyle(name, props) {
-    const styler = createStyler(theme.value[name]);
-    return styler(props);
-  }
-  return {
-    theme,
-    createStyler,
-    generateStyle
-  };
-});

package/dist/runtime/index.d.ts

@@ -1,44 +0,0 @@
-export { default as Accordion } from './components/Accordion.vue.js';
-export { default as Alert } from './components/Alert.vue.js';
-export { default as App } from './components/App.vue.js';
-export { default as Avatar } from './components/Avatar.vue.js';
-export { default as AvatarGroup } from './components/AvatarGroup.vue.js';
-export { default as Badge } from './components/Badge.vue.js';
-export { default as Breadcrumb } from './components/Breadcrumb.vue.js';
-export { default as Button } from './components/Button.vue.js';
-export { default as ButtonGroup } from './components/ButtonGroup.vue.js';
-export { default as Calendar } from './components/Calendar.vue.js';
-export { default as Card } from './components/Card.vue.js';
-export { default as Carousel } from './components/Carousel.vue.js';
-export { default as Checkbox } from './components/Checkbox.vue.js';
-export { default as Chip } from './components/Chip.vue.js';
-export { default as Collapsible } from './components/Collapsible.vue.js';
-export { default as Drawer } from './components/Drawer.vue.js';
-export { default as DropdownMenu } from './components/DropdownMenu.vue.js';
-export { default as Form } from './components/Form.vue.js';
-export { default as FormItem } from './components/FormItem.vue.js';
-export { default as Input } from './components/Input.vue.js';
-export { default as InputNumber } from './components/InputNumber.vue.js';
-export { default as Kbd } from './components/Kbd.vue.js';
-export { default as Link } from './components/Link.vue.js';
-export { default as LinkBase } from './components/LinkBase.vue.js';
-export { default as Modal } from './components/Modal.vue.js';
-export { default as OverlayProvider } from './components/OverlayProvider.vue.js';
-export { default as Pagination } from './components/Pagination.vue.js';
-export { default as PinInput } from './components/PinInput.vue.js';
-export { default as Popover } from './components/Popover.vue.js';
-export { default as Progress } from './components/Progress.vue.js';
-export { default as RadioGroup } from './components/RadioGroup.vue.js';
-export { default as ScrollArea } from './components/ScrollArea.vue.js';
-export { default as Select } from './components/Select.vue.js';
-export { default as Separator } from './components/Separator.vue.js';
-export { default as Skeleton } from './components/Skeleton.vue.js';
-export { default as Slider } from './components/Slider.vue.js';
-export { default as Switch } from './components/Switch.vue.js';
-export { default as Table } from './components/Table.vue.js';
-export { default as Tabs } from './components/Tabs.vue.js';
-export { default as Textarea } from './components/Textarea.vue.js';
-export { default as Toast } from './components/Toast.vue.js';
-export { default as ToastProvider } from './components/ToastProvider.vue.js';
-export { default as Tooltip } from './components/Tooltip.vue.js';
-export * from './types/index.js';

package/dist/runtime/index.js

@@ -1,44 +0,0 @@
-export { default as Accordion } from "./components/Accordion.vue";
-export { default as Alert } from "./components/Alert.vue";
-export { default as App } from "./components/App.vue";
-export { default as Avatar } from "./components/Avatar.vue";
-export { default as AvatarGroup } from "./components/AvatarGroup.vue";
-export { default as Badge } from "./components/Badge.vue";
-export { default as Breadcrumb } from "./components/Breadcrumb.vue";
-export { default as Button } from "./components/Button.vue";
-export { default as ButtonGroup } from "./components/ButtonGroup.vue";
-export { default as Calendar } from "./components/Calendar.vue";
-export { default as Card } from "./components/Card.vue";
-export { default as Carousel } from "./components/Carousel.vue";
-export { default as Checkbox } from "./components/Checkbox.vue";
-export { default as Chip } from "./components/Chip.vue";
-export { default as Collapsible } from "./components/Collapsible.vue";
-export { default as Drawer } from "./components/Drawer.vue";
-export { default as DropdownMenu } from "./components/DropdownMenu.vue";
-export { default as Form } from "./components/Form.vue";
-export { default as FormItem } from "./components/FormItem.vue";
-export { default as Input } from "./components/Input.vue";
-export { default as InputNumber } from "./components/InputNumber.vue";
-export { default as Kbd } from "./components/Kbd.vue";
-export { default as Link } from "./components/Link.vue";
-export { default as LinkBase } from "./components/LinkBase.vue";
-export { default as Modal } from "./components/Modal.vue";
-export { default as OverlayProvider } from "./components/OverlayProvider.vue";
-export { default as Pagination } from "./components/Pagination.vue";
-export { default as PinInput } from "./components/PinInput.vue";
-export { default as Popover } from "./components/Popover.vue";
-export { default as Progress } from "./components/Progress.vue";
-export { default as RadioGroup } from "./components/RadioGroup.vue";
-export { default as ScrollArea } from "./components/ScrollArea.vue";
-export { default as Select } from "./components/Select.vue";
-export { default as Separator } from "./components/Separator.vue";
-export { default as Skeleton } from "./components/Skeleton.vue";
-export { default as Slider } from "./components/Slider.vue";
-export { default as Switch } from "./components/Switch.vue";
-export { default as Table } from "./components/Table.vue";
-export { default as Tabs } from "./components/Tabs.vue";
-export { default as Textarea } from "./components/Textarea.vue";
-export { default as Toast } from "./components/Toast.vue";
-export { default as ToastProvider } from "./components/ToastProvider.vue";
-export { default as Tooltip } from "./components/Tooltip.vue";
-export * from "./types/index.js";

package/dist/runtime/locale/zh-tw.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("../utils").Locale<import("..").Messages>;
-export default _default;

package/dist/runtime/theme/accordion.d.ts

@@ -1,56 +0,0 @@
-declare const _default: {
-    base: undefined;
-    slots: {
-        root: string;
-        item: string;
-        header: string;
-        trigger: string;
-        content: string[];
-        body: string;
-        leadingIcon: string;
-        trailingIcon: string;
-        label: string;
-    };
-    variants: {
-        disabled: {
-            true: {
-                trigger: string;
-            };
-        };
-    };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        disabled: {
-            true: {
-                trigger: string;
-            };
-        };
-    }, {
-        root: string;
-        item: string;
-        header: string;
-        trigger: string;
-        content: string[];
-        body: string;
-        leadingIcon: string;
-        trailingIcon: string;
-        label: string;
-    }, undefined>;
-    defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
-        disabled: {
-            true: {
-                trigger: string;
-            };
-        };
-    }, {
-        root: string;
-        item: string;
-        header: string;
-        trigger: string;
-        content: string[];
-        body: string;
-        leadingIcon: string;
-        trailingIcon: string;
-        label: string;
-    }>;
-};
-export default _default;

package/dist/runtime/theme/accordion.js

@@ -1,28 +0,0 @@
-import { ct } from "@byyuurin/ui-kit";
-export default ct(
-  /* @unocss-include */
-  {
-    slots: {
-      root: "w-full color-ui-base",
-      item: "border-b last:border-b-0",
-      header: "flex",
-      trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 outline-none focus-visible:outline-ui-base/80 min-w-0",
-      content: [
-        "overflow-hidden focus:outline-none",
-        "data-[state=open]:animate-[accordion-down_200ms_ease-out]",
-        "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
-      ],
-      body: "text-sm pb-4 color-ui-base/80",
-      leadingIcon: "shrink-0 size-5",
-      trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-all duration-200",
-      label: "text-start break-words"
-    },
-    variants: {
-      disabled: {
-        true: {
-          trigger: "cursor-not-allowed opacity-50"
-        }
-      }
-    }
-  }
-);