@brickflow/ui 0.0.27 → 0.0.28

package/dist/runtime/components/Button/index.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import Icon from "../Icon/index.vue";
+import BaseLink from "../Link/index.vue";
+const props = defineProps({
+  block: { type: Boolean, required: false },
+  color: { type: String, required: false, default: "main" },
+  disabled: { type: Boolean, required: false },
+  icon: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false },
+  rounded: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  square: { type: Boolean, required: false },
+  to: { type: null, required: false, default: void 0 },
+  trailingIcon: { type: String, required: false, default: void 0 },
+  type: { type: String, required: false, default: "button" },
+  variant: { type: String, required: false, default: "solid" }
+});
+const sizeClasses = {
+  lg: UI_STYLE.size.lg,
+  md: UI_STYLE.size.md,
+  sm: UI_STYLE.size.sm,
+  xl: UI_STYLE.size.xl,
+  xs: UI_STYLE.size.xs
+};
+const sizeIconClasses = {
+  lg: UI_STYLE.size.lgIcon,
+  md: UI_STYLE.size.mdIcon,
+  sm: UI_STYLE.size.smIcon,
+  xl: UI_STYLE.size.xlIcon,
+  xs: UI_STYLE.size.xsIcon
+};
+const colorClasses = {
+  alt: {
+    ghost: UI_STYLE.color.alt.ghost,
+    glass: UI_STYLE.color.alt.glass,
+    soft: UI_STYLE.color.alt.soft,
+    solid: UI_STYLE.color.alt.solid,
+    subtle: UI_STYLE.color.alt.subtle
+  },
+  danger: {
+    ghost: UI_STYLE.color.danger.ghost,
+    glass: UI_STYLE.color.danger.glass,
+    soft: UI_STYLE.color.danger.soft,
+    solid: UI_STYLE.color.danger.solid,
+    subtle: UI_STYLE.color.danger.subtle
+  },
+  info: {
+    ghost: UI_STYLE.color.info.ghost,
+    glass: UI_STYLE.color.info.glass,
+    soft: UI_STYLE.color.info.soft,
+    solid: UI_STYLE.color.info.solid,
+    subtle: UI_STYLE.color.info.subtle
+  },
+  main: {
+    ghost: UI_STYLE.color.main.ghost,
+    glass: UI_STYLE.color.main.glass,
+    soft: UI_STYLE.color.main.soft,
+    solid: UI_STYLE.color.main.solid,
+    subtle: UI_STYLE.color.main.subtle
+  },
+  plain: {
+    ghost: UI_STYLE.color.plain.ghost,
+    glass: UI_STYLE.color.plain.glass,
+    soft: UI_STYLE.color.plain.soft,
+    solid: UI_STYLE.color.plain.solid,
+    subtle: UI_STYLE.color.plain.subtle
+  },
+  warn: {
+    ghost: UI_STYLE.color.warn.ghost,
+    glass: UI_STYLE.color.warn.glass,
+    soft: UI_STYLE.color.warn.soft,
+    solid: UI_STYLE.color.warn.solid,
+    subtle: UI_STYLE.color.warn.subtle
+  },
+  win: {
+    ghost: UI_STYLE.color.win.ghost,
+    glass: UI_STYLE.color.win.glass,
+    soft: UI_STYLE.color.win.soft,
+    solid: UI_STYLE.color.win.solid,
+    subtle: UI_STYLE.color.win.subtle
+  }
+};
+const component = computed(() => props.to === void 0 ? "button" : BaseLink);
+const disabled = computed(() => props.disabled || props.loading);
+const isButton = computed(() => props.to === void 0);
+const classes = computed(() => [
+  UI_STYLE.base,
+  sizeClasses[props.size],
+  colorClasses[props.color][props.variant],
+  props.block && UI_STYLE.state.block,
+  props.square && UI_STYLE.state.square,
+  disabled.value && UI_STYLE.state.disabled
+]);
+const isAnimating = shallowRef(false);
+const animationTapClass = UI_STYLE.animationTap;
+function handleTap() {
+  isAnimating.value = false;
+  requestAnimationFrame(() => {
+    isAnimating.value = true;
+  });
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-bind="animationTapClass ? { onPointerupPassive: handleTap } : {}"
+    :to="props.to"
+    :type="isButton ? props.type : void 0"
+    :disabled="isButton ? disabled : void 0"
+    :aria-busy="props.loading || void 0"
+    :aria-disabled="disabled || void 0"
+    :tabindex="disabled && !isButton ? -1 : void 0"
+    :class="[classes, isAnimating && animationTapClass]"
+    data-testid="ui-button"
+    :style="{
+  borderRadius: props.rounded && '99999px'
+}"
+    @contextmenu.prevent
+  >
+    <span
+      v-if="$slots.leading || props.icon || props.loading"
+      :class="UI_STYLE.slot.leading"
+    >
+      <slot name="leading">
+        <Icon
+          v-if="props.loading"
+          :name="UI_STYLE.state.loadingIconName"
+          :class="UI_STYLE.state.loading"
+          aria-hidden="true"
+        />
+        <Icon
+          v-else
+          :name="props.icon"
+          :class="sizeIconClasses[props.size]"
+          aria-hidden="true"
+        />
+      </slot>
+    </span>
+
+    <span
+      v-if="$slots.default"
+      :class="UI_STYLE.slot.label"
+    >
+      <slot />
+    </span>
+
+    <span
+      v-if="$slots.trailing || props.trailingIcon"
+      :class="UI_STYLE.slot.trailing"
+    >
+      <slot name="trailing">
+        <Icon
+          :name="props.trailingIcon"
+          :class="sizeIconClasses[props.size]"
+          aria-hidden="true"
+        />
+      </slot>
+    </span>
+  </component>
+</template>

package/dist/runtime/components/Button/index.vue.d.ts

@@ -0,0 +1,45 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    block?: boolean;
+    color?: ButtonColor;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: ButtonSize;
+    square?: boolean;
+    to?: RouteLocationRaw;
+    trailingIcon?: string;
+    type?: 'button' | 'reset' | 'submit';
+    variant?: ButtonVariant;
+};
+type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
+type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+type ButtonVariant = 'ghost' | 'glass' | 'soft' | 'solid' | 'subtle';
+declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_22) => any;
+} & {
+    trailing?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: ButtonSize;
+    type: "button" | "reset" | "submit";
+    to: RouteLocationRaw;
+    color: ButtonColor;
+    icon: string;
+    rounded: boolean;
+    trailingIcon: string;
+    variant: ButtonVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/runtime/components/Button/size.demo.d.vue.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=size.demo.vue.d.ts.map

package/dist/runtime/components/Button/size.demo.vue

@@ -0,0 +1,78 @@
+<script>
+export const uiDemo = {
+  title: "Size & Rounded"
+};
+</script>
+
+<script setup>
+import { firstIconName } from "#brickflow-ui-icons";
+import Button from "./index.vue";
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <div class="flex flex-wrap items-center gap-3">
+      <Button
+        :icon="firstIconName"
+        size="xs"
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        size="sm"
+      >
+        Button
+      </Button>
+      <Button :icon="firstIconName">Button</Button>
+      <Button
+        :icon="firstIconName"
+        size="lg"
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        size="xl"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3">
+      <Button
+        :icon="firstIconName"
+        size="xs"
+        rounded
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        size="sm"
+        rounded
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        rounded
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        size="lg"
+        rounded
+      >
+        Button
+      </Button>
+      <Button
+        :icon="firstIconName"
+        size="xl"
+        rounded
+      >
+        Button
+      </Button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Button/size.demo.vue.d.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=size.demo.vue.d.ts.map

package/dist/runtime/components/Button/slots.demo.d.vue.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=slots.demo.vue.d.ts.map

package/dist/runtime/components/Button/slots.demo.vue

@@ -0,0 +1,23 @@
+<script>
+export const uiDemo = {
+  title: "Slots"
+};
+</script>
+
+<script setup>
+import { ref } from "vue";
+import Button from "./index.vue";
+const clicks = ref(0);
+</script>
+
+<template>
+  <Button @click="clicks += 1">
+    <template #leading>
+      <span class="text-xs">leading</span>
+    </template>
+    Added {{ clicks }} times
+    <template #trailing>
+      <span class="text-xs">trailing</span>
+    </template>
+  </Button>
+</template>

package/dist/runtime/components/Button/slots.demo.vue.d.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=slots.demo.vue.d.ts.map

package/dist/runtime/components/Button/state.demo.d.vue.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=state.demo.vue.d.ts.map

package/dist/runtime/components/Button/state.demo.vue

@@ -0,0 +1,18 @@
+<script>
+export const uiDemo = {
+  title: "State"
+};
+</script>
+
+<script setup>
+import Button from "./index.vue";
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Button loading>Loading</Button>
+    <Button disabled>Disabled</Button>
+    <Button to="/">Link</Button>
+    <Button block>Block</Button>
+  </div>
+</template>

package/dist/runtime/components/Button/state.demo.vue.d.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=state.demo.vue.d.ts.map

package/dist/runtime/components/Button/variants.demo.d.vue.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=variants.demo.vue.d.ts.map

package/dist/runtime/components/Button/variants.demo.vue

@@ -0,0 +1,207 @@
+<script>
+export const uiDemo = {
+  title: "Color & Variants"
+};
+</script>
+
+<script setup>
+import Button from "./index.vue";
+</script>
+
+<template>
+  <div class="relative flex w-fit flex-col flex-wrap items-start gap-3 pl-13">
+    <div class="absolute top-0 left-0 z-0 size-full object-cover pt-7 pl-13">
+      <img
+        src="https://picsum.photos/1000/1000"
+        class="top-0 z-0 size-full rounded-xl object-cover opacity-50"
+      />
+    </div>
+    <div class="flex w-full flex-wrap items-center justify-around gap-3 text-xs text-plain-600">
+      <span>solid</span>
+      <span>ghost</span>
+      <span>glass</span>
+      <span>soft</span>
+      <span>subtle</span>
+    </div>
+    <div
+      class="absolute top-0 left-0 flex h-full flex-col items-center justify-around gap-3 pt-7 text-xs text-plain-600"
+    >
+      <span>main</span>
+      <span>plain</span>
+      <span>alt</span>
+      <span>danger</span>
+      <span>info</span>
+      <span>warn</span>
+      <span>win</span>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button>Button</Button>
+      <Button variant="ghost">Button</Button>
+      <Button variant="glass">Button</Button>
+      <Button variant="soft">Button</Button>
+      <Button variant="subtle">Button</Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="plain">Button</Button>
+      <Button
+        color="plain"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="plain"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="plain"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="plain"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="alt">Button</Button>
+      <Button
+        color="alt"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="alt"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="alt"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="alt"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="danger">Button</Button>
+      <Button
+        color="danger"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="danger"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="danger"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="danger"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="info">Button</Button>
+      <Button
+        color="info"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="info"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="info"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="info"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="warn">Button</Button>
+      <Button
+        color="warn"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="warn"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="warn"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="warn"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+    <div class="flex flex-wrap items-center gap-3 p-2">
+      <Button color="win">Button</Button>
+      <Button
+        color="win"
+        variant="ghost"
+      >
+        Button
+      </Button>
+      <Button
+        color="win"
+        variant="glass"
+      >
+        Button
+      </Button>
+      <Button
+        color="win"
+        variant="soft"
+      >
+        Button
+      </Button>
+      <Button
+        color="win"
+        variant="subtle"
+      >
+        Button
+      </Button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Button/variants.demo.vue.d.ts

@@ -0,0 +1,7 @@
+export declare const uiDemo: {
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=variants.demo.vue.d.ts.map

package/dist/runtime/components/Icon/basic.demo.d.vue.ts

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=basic.demo.vue.d.ts.map

package/dist/runtime/components/Icon/basic.demo.vue

@@ -0,0 +1,44 @@
+<script>
+export const uiDemo = {
+  description: "The name matches the SVG filename without its extension.",
+  title: "Basic usage"
+};
+</script>
+
+<script setup>
+import { ref } from "vue";
+import { firstIconName } from "#brickflow-ui-icons";
+import Icon from "./index.vue";
+const iconName = ref(firstIconName);
+</script>
+
+<template>
+  <div class="flex flex-col flex-wrap items-start gap-4 text-plain-100">
+    <input
+      v-model="iconName"
+      aria-label="Icon name"
+      class="rounded-lg border border-plain-700 bg-plain-900 px-3 py-2 text-sm text-plain-100 outline-none focus:border-main-400"
+      placeholder="Icon name"
+      type="text"
+    />
+
+    <div class="flex items-center gap-4">
+      <Icon
+        :name="iconName"
+        class="text-2xl"
+      />
+      <Icon
+        :name="iconName"
+        class="w-4"
+      />
+      <Icon
+        :name="iconName"
+        class="text-2xl text-win-400"
+      />
+      <Icon
+        :name="iconName"
+        class="text-2xl text-red-400"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Icon/basic.demo.vue.d.ts

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=basic.demo.vue.d.ts.map

package/dist/runtime/components/Icon/index.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    name: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map