@brickflow/ui 0.0.32 → 0.0.34

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

@@ -1,42 +1,48 @@
 import type { RouteLocationRaw } from 'vue-router';
-type __VLS_Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     block?: boolean;
-    color?: ButtonColor;
+    color?: string;
     disabled?: boolean;
     icon?: string;
     loading?: boolean;
     rounded?: boolean;
-    size?: ButtonSize;
+    size?: string;
     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";
+    variant?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    block?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: string;
+    square?: boolean;
+    to?: RouteLocationRaw;
+    trailingIcon?: string;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}> & Readonly<{}>, {
+    size: string;
     type: "button" | "reset" | "submit";
+    color: string;
     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;
+    variant: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    trailing?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,4 +1,5 @@
 <script>
+const UI_CONFIG = defineUiConfig();
 export const uiDemo = {
   title: "Color & Variants"
 };
@@ -6,199 +7,42 @@ export const uiDemo = {
 
 <script setup>
 import Button from "./index.vue";
+const colors = Object.entries(UI_CONFIG.colorClasses).map(([name, classes]) => ({
+  name,
+  variants: Object.keys(classes)
+}));
+const variants = colors[0]?.variants ?? [];
 </script>
 
 <template>
-  <div class="relative flex w-fit flex-col flex-wrap items-start gap-3 pl-13">
+  <div class="relative flex w-fit flex-col 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"
+        src="https://images.unsplash.com/photo-1545346315-f4c47e3e1b55?ixid=M3w4MjcwNjd8MHwxfHNlYXJjaHwyfHxzdHJvbmclMjBtYW58ZW58MHx8fHwxNzg4MjIyNTU1fDA&ixlib=rb-4.1.0&w=1000&h=1000&fit=max&q=80"
         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 class="flex w-full flex-wrap items-center justify-around gap-3 text-xs text-slate-600">
+      <span
+        v-for="variant in variants"
+        :key="variant"
+      >
+        {{ variant }}
+      </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"
+      v-for="color in colors"
+      :key="color.name"
+      class="relative flex w-full flex-wrap items-center gap-3 p-2"
     >
-      <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"
+      <span class="absolute top-1/2 right-full mr-3 -translate-y-1/2 text-xs text-slate-600">
+        {{ color.name }}
+      </span>
+      <Button
+        v-for="variant in color.variants"
+        :key="variant"
+        :color="color.name"
+        :variant="variant"
       >
         Button
       </Button>

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

@@ -13,11 +13,11 @@ const iconName = ref(firstIconName);
 </script>
 
 <template>
-  <div class="flex flex-col flex-wrap items-start gap-4 text-plain-100">
+  <div class="flex flex-col flex-wrap items-start gap-4 text-zinc-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"
+      class="rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-blue-400"
       placeholder="Icon name"
       type="text"
     />
@@ -33,7 +33,7 @@ const iconName = ref(firstIconName);
       />
       <Icon
         :name="iconName"
-        class="text-2xl text-win-400"
+        class="text-2xl text-green-400"
       />
       <Icon
         :name="iconName"

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

@@ -13,13 +13,13 @@ import Link from "./index.vue";
   <div class="flex flex-wrap items-center gap-4">
     <Link
       to="/"
-      class="text-main-300 hover:text-main-200"
+      class="text-blue-300 hover:text-blue-200"
     >
       Go to Home
     </Link>
     <Link
       to="/ui?component=button"
-      class="text-main-300 hover:text-main-200"
+      class="text-blue-300 hover:text-blue-200"
     >
       Open Button
     </Link>

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

@@ -1,17 +1,15 @@
 declare const screen: {
-    readonly base: boolean;
-    readonly baseClass: "sm:hidden";
-    readonly lg: boolean;
-    readonly lgClass: "max-lg:hidden xl:hidden";
-    readonly md: boolean;
-    readonly mdClass: "max-md:hidden lg:hidden";
+    readonly dk: boolean;
+    readonly dkClass: "dkHidden";
+    readonly lp: boolean;
+    readonly lpClass: "lpHidden";
+    readonly mb: boolean;
+    readonly mbClass: "mbHidden";
+    readonly ms: boolean;
+    readonly msClass: "msHidden";
     readonly ready: Promise<void>;
-    readonly sm: boolean;
-    readonly smClass: "max-sm:hidden md:hidden";
-    readonly xl: boolean;
-    readonly xlClass: "max-xl:hidden 2xl:hidden";
-    readonly xxl: boolean;
-    readonly xxlClass: "max-2xl:hidden";
+    readonly tb: boolean;
+    readonly tbClass: "tbHidden";
 };
 export declare function useScreen(): typeof screen;
 export {};

package/dist/runtime/composables/useScreen.js

@@ -1,19 +1,17 @@
 import { onMounted, reactive } from "vue";
 const state = reactive({
-  base: true,
-  lg: true,
-  md: true,
-  sm: true,
-  xl: true,
-  xxl: true
+  dk: true,
+  lp: true,
+  mb: true,
+  ms: true,
+  tb: true
 });
 const queries = {
-  base: "(width < 40rem)",
-  lg: "(64rem <= width < 80rem)",
-  md: "(48rem <= width < 64rem)",
-  sm: "(40rem <= width < 48rem)",
-  xl: "(80rem <= width < 96rem)",
-  xxl: "(width >= 96rem)"
+  dk: "(width >= 1440px)",
+  lp: "(1024px <= width < 1440px)",
+  mb: "(480px <= width < 768px)",
+  ms: "(width < 480px)",
+  tb: "(768px <= width < 1024px)"
 };
 let initialized = false;
 let resolveReady = () => void 0;
@@ -36,31 +34,27 @@ function initialize() {
   resolveReady();
 }
 const screen = {
-  get base() {
-    return state.base;
+  get dk() {
+    return state.dk;
   },
-  baseClass: "sm:hidden",
-  get lg() {
-    return state.lg;
+  dkClass: "dkHidden",
+  get lp() {
+    return state.lp;
   },
-  lgClass: "max-lg:hidden xl:hidden",
-  get md() {
-    return state.md;
+  lpClass: "lpHidden",
+  get mb() {
+    return state.mb;
   },
-  mdClass: "max-md:hidden lg:hidden",
-  ready,
-  get sm() {
-    return state.sm;
-  },
-  smClass: "max-sm:hidden md:hidden",
-  get xl() {
-    return state.xl;
+  mbClass: "mbHidden",
+  get ms() {
+    return state.ms;
   },
-  xlClass: "max-xl:hidden 2xl:hidden",
-  get xxl() {
-    return state.xxl;
+  msClass: "msHidden",
+  ready,
+  get tb() {
+    return state.tb;
   },
-  xxlClass: "max-2xl:hidden"
+  tbClass: "tbHidden"
 };
 export function useScreen() {
   onMounted(initialize);

package/dist/runtime/config.d.ts

@@ -3,7 +3,9 @@ export {}
 declare module '#brickflow-ui-config' {
   import type { BrickflowUiConfig } from './tailwind'
 
-  export const UI_STYLE: BrickflowUiConfig['uiStyles']
+  export const UI_CONFIG: BrickflowUiConfigType
+  export const UI_STYLE: BrickflowUiStyleType
+  export const uiConfig: BrickflowUiConfig['uiConfig']
   export const uiStyles: BrickflowUiConfig['uiStyles']
 
   const config: BrickflowUiConfig
@@ -12,6 +14,22 @@ declare module '#brickflow-ui-config' {
 }
 
 declare global {
+  type BrickflowUiConfigFor<TExpected extends BrickflowUiConfigObject> = {
+    [TKey in keyof BrickflowUiConfigLiteralPaths]: BrickflowUiConfigLiteralPaths[TKey] extends TExpected
+      ? BrickflowUiConfigLiteralPaths[TKey]
+      : never
+  }[keyof BrickflowUiConfigLiteralPaths] extends infer TMatched
+    ? [TMatched] extends [never]
+      ? TExpected
+      : TMatched
+    : never
+
+  interface BrickflowUiConfigLiteralPaths {}
+
+  interface BrickflowUiConfigPaths {}
+
+  type BrickflowUiConfigType = BrickflowUiConfigPaths & Record<string, unknown>
+
   interface BrickflowUiStylePaths {}
 
   type BrickflowUiStyleType = BrickflowUiStylePaths & BrickflowUiStyleValue
@@ -21,10 +39,15 @@ declare global {
   }
 
   const UI_STYLE: BrickflowUiStyleType
+
+  const UI_CONFIG: BrickflowUiConfigType
+
+  function defineUiConfig<TConfig extends BrickflowUiConfigObject>(): BrickflowUiConfigFor<TConfig>
 }
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
+    readonly UI_CONFIG: BrickflowUiConfigType
     readonly UI_STYLE: BrickflowUiStyleType
   }
 }