bonkers-ui 1.0.61 → 1.0.63

package/src/components/ui-toggle/ui-toggle.vue

@@ -1,149 +0,0 @@
-<template>
-	<div
-		class="ui-toggle"
-	>
-		<slot name="header">
-			<ui-typography
-				line-height
-				class="mb-sm"
-				:weight="ETextWeight.SEMI_BOLD"
-			>
-				{{ header }}
-			</ui-typography>
-		</slot>
-
-		<label
-			class="flex cursor-pointer gap-sm rounded-full"
-			:class="[
-				disabled && 'ui-toggle_disabled pointer-events-none',
-				invertOrder && 'flex-row-reverse',
-				alignCenter && 'items-center'
-			]"
-		>
-			<span
-				class="ui-input__input-wrapper relative block h-md"
-			>
-				<input
-					v-model="checkboxModel"
-					type="checkbox"
-					class="absolute h-0 w-0 appearance-none border-0"
-					:value="value"
-				>
-
-				<span class="ui-toggle__bg-block block h-md w-lg rounded-full bg-secondary-alt" />
-
-				<span class="ui-toggle__dot absolute top-0 block rounded-full bg-white">
-					<svg
-						class="ui-toggle__check-icon absolute"
-						:class="disabled ? 'text-primary-300' : 'text-primary'"
-						width="16"
-						height="12"
-						viewBox="0 0 16 12"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M1 4.40106L6.60071 10.1135L15.1694 1.71245"
-							stroke="currentColor"
-							stroke-width="1.6"
-							stroke-linecap="round"
-						/>
-					</svg>
-				</span>
-			</span>
-
-			<slot name="title">
-				<ui-typography
-					:size="ETypographySizes.MD"
-					class="w-full"
-					line-height
-				>
-					{{ title }}
-				</ui-typography>
-			</slot>
-		</label>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
-	import { computed } from "vue";
-
-	const props = defineProps<{
-		header?: string;
-		title?: string;
-		modelValue: boolean | unknown[];
-		disabled?: boolean;
-		invertOrder?: boolean;
-		alignCenter?: boolean;
-		value?: string;
-	}>();
-
-	const emit = defineEmits<{
-		(e: "update:modelValue", state: unknown): void
-	}>();
-
-	const checkboxModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
-	});
-</script>
-
-<style scoped>
-	.ui-toggle__dot {
-		top: 50%;
-		width: 22px;
-		height: 22px;
-		transform: translate3d(1px, -50%, 0);
-		transition: transform 0.2s ease-in-out;
-	}
-
-	.ui-toggle__check-icon {
-		top: 50%;
-		left: 50%;
-		transform: translate3d(-50%, -50%, 0);
-		stroke-dasharray: 70;
-		stroke-dashoffset: 70;
-		transition: stroke-dashoffset 0.2s ease-in-out;
-	}
-
-	.ui-toggle:hover .ui-toggle__dot,
-	.ui-toggle:active .ui-toggle__dot,
-	.ui-toggle:focus .ui-toggle__dot {
-		box-shadow: var(--shadow-border-secondary);
-	}
-
-	.ui-toggle input:checked ~ .ui-toggle__dot {
-		transform: translate3d(calc(var(--lg) - 100% - 1px), -50%, 0);
-	}
-
-	.ui-toggle:hover input:checked ~ .ui-toggle__dot,
-	.ui-toggle:active input:checked ~ .ui-toggle__dot,
-	.ui-toggle:focus input:checked ~ .ui-toggle__dot {
-		box-shadow: var(--shadow-border-primary);
-	}
-
-	.ui-toggle__bg-block {
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.ui-toggle_disabled .ui-toggle__bg-block {
-		background-color: var(--color-secondary-alt-300);
-	}
-
-	.ui-toggle input:checked ~ .ui-toggle__bg-block {
-		background-color: var(--color-primary);
-	}
-
-	.ui-toggle input:checked ~ .ui-toggle__dot .ui-toggle__check-icon {
-		stroke-dashoffset: 0;
-	}
-
-	.ui-toggle_disabled input:checked ~ .ui-toggle__bg-block {
-		background-color: var(--color-primary-300);
-	}
-</style>

package/src/components/ui-typography/_typings.ts

@@ -1,30 +0,0 @@
-export enum ETypographySizes {
-	XXS = "xxs",
-	XS = "xs",
-	SM = "sm",
-	MD = "m",
-	LG = "lg",
-	XL = "xl",
-	XXL = "2xl",
-	XXXL = "3xl",
-	XXXXL = "4xl",
-	XXXXXL = "5xl",
-}
-
-export enum ETextWeight {
-	LIGHT = "light", // 300
-	REGULAR = "regular", // 500
-	SEMI_BOLD = "semi_bold", // 700
-	BOLD = "bold", // 900
-}
-
-export enum ETextAlign {
-	LEFT = "left",
-	CENTER = "center",
-	RIGHT = "right",
-}
-
-export enum ETextTransform {
-	LOWERCASE = "lowercase",
-	UPPERCASE = "uppercase",
-}

package/src/components/ui-typography/index.ts

@@ -1,3 +0,0 @@
-export { default } from "./ui-typography.vue";
-export { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";
-export { EColors } from "../../_types/colors";

package/src/components/ui-typography/ui-typography.stories.ts

@@ -1,101 +0,0 @@
-import { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";
-import UiTypography from "./ui-typography.vue";
-import type { Story } from "@storybook/vue3";
-import { EColors } from "../../_types/colors";
-
-export default {
-	title: "Components/ui-typography",
-	component: UiTypography,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		is: {
-			control: {
-				type: "text" 
-			},
-			description: "The Element component or tag",
-		},
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EColors),
-			description: "The Element kinds",
-		},
-		weight: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(ETextWeight),
-			description: "The Element weights",
-		},
-		align: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(ETextAlign),
-			description: "The Element align",
-		},
-		textTransform: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(ETextTransform),
-			description: "The Element transform",
-		},
-		lineHeight: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element line height 1.6",
-		},
-		underline: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element underline",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(ETypographySizes),
-			description: "The Element sizes",
-		},
-	},
-	args: {
-		slot: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-		underline: false
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiTypography>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	// Components used in your story `template` are defined in the `components` object
-	components: {
-		UiTypography 
-	},
-	// The story's `args` need to be mapped into the template through the `setup()` method
-	setup() {
-		return {
-			args 
-		};
-	},
-	// And then the `args` are bound to your component with `v-bind="args"`
-	template: `
-		<ui-typography v-bind="args">
-			${args.slot}
-		</ui-typography>
-	`,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-	size: ETypographySizes.MD,
-	weight: ETextWeight.REGULAR,
-	align: ETextAlign.LEFT,
-	lineHeight: true,
-	kind: EColors.PRIMARY,
-	is: "p",
-};

package/src/components/ui-typography/ui-typography.vue

@@ -1,110 +0,0 @@
-<template>
-	<component
-		:is="is || 'p'"
-		class="ui-typography"
-		:class="[
-			size === ETypographySizes.MD && 'text-md',
-			size === ETypographySizes.XXS && 'text-xxs',
-			size === ETypographySizes.XS && 'text-xs',
-			size === ETypographySizes.SM && 'text-sm',
-			size === ETypographySizes.LG && 'text-lg',
-			size === ETypographySizes.XL && 'text-xl',
-			size === ETypographySizes.XXL && 'text-2xl',
-			size === ETypographySizes.XXS && 'text-xxs',
-			size === ETypographySizes.XXXL && 'text-3xl',
-			size === ETypographySizes.XXXXL && 'text-4xl',
-			size === ETypographySizes.XXXXXL && 'text-5xl',
-
-			kind === EColors.WHITE && 'text-white',
-			kind === EColors.BLACK && 'text-black',
-			kind === EColors.TRANSPARENT && 'text-transparent',
-			kind === EColors.CURRENT && 'text-current',
-
-			kind === EColors.PRIMARY && 'text-primary',
-			kind === EColors.PRIMARY_300 && 'text-primary-300',
-			kind === EColors.PRIMARY_400 && 'text-primary-400',
-			kind === EColors.PRIMARY_500 && 'text-primary-500',
-			kind === EColors.PRIMARY_600 && 'text-primary-600',
-			kind === EColors.PRIMARY_700 && 'text-primary-700',
-
-			kind === EColors.PRIMARY_ALT && 'text-primary',
-			kind === EColors.PRIMARY_ALT_300 && 'text-primary-300',
-			kind === EColors.PRIMARY_ALT_400 && 'text-primary-400',
-			kind === EColors.PRIMARY_ALT_500 && 'text-primary-500',
-			kind === EColors.PRIMARY_ALT_600 && 'text-primary-600',
-			kind === EColors.PRIMARY_ALT_700 && 'text-primary-700',
-
-			kind === EColors.SECONDARY && 'text-secondary',
-			kind === EColors.SECONDARY_300 && 'text-secondary-300',
-			kind === EColors.SECONDARY_400 && 'text-secondary-400',
-			kind === EColors.SECONDARY_500 && 'text-secondary-500',
-			kind === EColors.SECONDARY_600 && 'text-secondary-600',
-			kind === EColors.SECONDARY_700 && 'text-secondary-700',
-
-			kind === EColors.WARNING && 'text-warning',
-			kind === EColors.WARNING_300 && 'text-warning-300',
-			kind === EColors.WARNING_400 && 'text-warning-400',
-			kind === EColors.WARNING_500 && 'text-warning-500',
-			kind === EColors.WARNING_600 && 'text-warning-600',
-			kind === EColors.WARNING_700 && 'text-warning-700',
-
-			kind === EColors.ERROR && 'text-error',
-			kind === EColors.ERROR_300 && 'text-error-300',
-			kind === EColors.ERROR_400 && 'text-error-400',
-			kind === EColors.ERROR_500 && 'text-error-500',
-			kind === EColors.ERROR_600 && 'text-error-600',
-			kind === EColors.ERROR_700 && 'text-error-700',
-
-			kind === EColors.ACCENT && 'text-accent',
-			kind === EColors.ACCENT_300 && 'text-accent-300',
-			kind === EColors.ACCENT_500 && 'text-accent-500',
-			kind === EColors.ACCENT_600 && 'text-accent-600',
-			kind === EColors.ACCENT_700 && 'text-accent-700',
-
-			kind === EColors.ACCENT_ALT && 'text-accent-alt',
-			kind === EColors.ACCENT_ALT_500 && 'text-accent-alt-500',
-
-			kind === EColors.SECONDARY_ALT && 'text-secondary-alt',
-			kind === EColors.SECONDARY_ALT_200 && 'text-secondary-alt-200',
-			kind === EColors.SECONDARY_ALT_300 && 'text-secondary-alt-300',
-			kind === EColors.SECONDARY_ALT_400 && 'text-secondary-alt-400',
-			kind === EColors.SECONDARY_ALT_500 && 'text-secondary-alt-500',
-			kind === EColors.SECONDARY_ALT_600 && 'text-secondary-alt-600',
-			kind === EColors.SECONDARY_ALT_700 && 'text-secondary-alt-700',
-
-			weight === ETextWeight.LIGHT && 'font-light',
-			weight === ETextWeight.REGULAR && 'font-medium',
-			weight === ETextWeight.SEMI_BOLD && 'font-bold',
-			weight === ETextWeight.BOLD && 'font-black',
-
-			align === ETextAlign.LEFT && 'text-left',
-			align === ETextAlign.CENTER && 'text-center',
-			align === ETextAlign.RIGHT && 'text-right',
-
-			textTransform === ETextTransform.LOWERCASE && 'lowercase',
-			textTransform === ETextTransform.UPPERCASE && 'uppercase',
-
-			lineHeight ? 'leading-normal' : 'leading-none',
-			underline && 'underline',
-		]"
-	>
-		<slot />
-	</component>
-</template>
-
-<script lang="ts" setup>
-	import type { Component } from "vue";
-	import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from "./_typings";
-	import { EColors } from "../../_types/colors";
-
-	defineProps<{
-		align?: ETextAlign;
-		size?: ETypographySizes;
-		kind?: EColors;
-		weight?: ETextWeight;
-		lineHeight?: boolean;
-		textTransform?: ETextTransform;
-		underline?: boolean;
-		is?: string | Component;
-	}>();
-</script>

package/src/components/ui-verification-input/index.ts

@@ -1 +0,0 @@
-export { default } from "./ui-verification-input.vue";

package/src/components/ui-verification-input/ui-verification-input.stories.ts

@@ -1,48 +0,0 @@
-import UiVerificationInput from "./ui-verification-input.vue";
-
-export default {
-	title: "Components/ui-verification-input",
-	component: UiVerificationInput,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		inputsCount: {
-			control: {
-				type: "number" 
-			},
-			description: "Number of inputs",
-		},
-		type: {
-			control: {
-				type: "select" 
-			},
-			options: ["text"],
-			description: "Inputs type",
-		},
-	},
-	args: {
-		inputsCount: 4,
-		type: "text"
-	}
-};
-
-type MyComponentProps = InstanceType<typeof UiVerificationInput>["$props"];
-
-const Template = (args: MyComponentProps) => ({
-	components: {
-		UiVerificationInput
-	},
-	setup() {
-		const filedHandler = (payload: string)=>{
-			console.log("=--->",payload);
-		};
-		return {
-			args,
-			filedHandler 
-		};
-	},
-	template: `
-		<ui-verification-input @onFiled="filedHandler" :className="args.className" :inputsCount="args.inputsCount" :type="args.type"/>
-	`
-});
-
-export const Default = Template.bind({});

package/src/components/ui-verification-input/ui-verification-input.vue

@@ -1,126 +0,0 @@
-<template>
-	<div
-		class="inputs grid"
-	>
-		<div
-			v-for="(_, index) in inputsCount"
-			:key="index"
-			class="input-wrapper"
-		>
-			<input
-				ref="inputsRefs"
-				:type="type || 'text'"
-				maxlength="1"
-				placeholder="&#8226;"
-				@input="(e)=>inputHandler(e, index)"
-				@focus="focusHandler"
-				@paste="handlePaste"
-			>
-			<div class="bottom-wrapper" />
-		</div>
-	</div>
-	<slot name="button" />
-</template>
-
-<script lang="ts" setup>
-	import { ref } from "vue";
-
-	type TProps = {
-		inputsCount: number;
-		type?: "text";
-	}
-
-	const props = defineProps<TProps>();
-	const emit = defineEmits(["onFiled"]);
-
-	const inputsRefs = ref<Array<HTMLInputElement | null>>([]);
-
-	const doSubmit = ()=>{
-		const generateString = inputsRefs.value.map(input => input?.value).join("");
-		emit("onFiled", generateString);
-	};
-
-	const inputHandler = (event:Event, index:number)=>{
-		if (index < props.inputsCount) {
-			inputsRefs.value[index + 1]?.focus();
-		}
-
-		if (index === props.inputsCount - 1) {
-			doSubmit();
-		}
-	};
-
-	const focusHandler = (e:FocusEvent) => {
-		if (e.target) {
-			(e.target as HTMLInputElement).select();
-		}
-	};
-
-	const handlePaste = (e:ClipboardEvent) => {
-		e.preventDefault();
-		const pasteText = e.clipboardData?.getData("text");
-		if (pasteText && pasteText.length === props.inputsCount) {
-			inputsRefs.value[props.inputsCount - 1]?.focus();
-
-			inputsRefs.value.forEach((input, index)=>{
-				if (input) {
-					input.value = pasteText[index];
-				}
-			});
-			doSubmit();
-		}
-
-	};
-
-</script>
-
-<style scoped>
-	.inputs {
-		grid-template-columns: repeat(auto-fill, 38px);
-		grid-gap: 24px;
-	}
-
-	.inputs .input-wrapper {
-		position: relative;
-		height: 58px;
-	}
-
-	.inputs input {
-		width: 100%;
-		border: none;
-		text-align: center;
-		font-size: 36px;
-		font-weight: bold;
-		outline: none;
-
-		/* caret-color:  var(--color-transparent); */
-	}
-
-	.inputs .input-wrapper .bottom-wrapper {
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		height: 5px;
-		background-color: var(--color-secondary-300);
-		border-radius: 3px;
-		transition: background-color 0.3s ease-in-out;
-	}
-
-	.inputs input:focus ~ .bottom-wrapper {
-		background-color: var(--color-primary);
-	}
-
-	.inputs input::placeholder {
-		font-size: 55px;
-		color: var(--color-secondary-300);
-		opacity: 1;
-		transform: scale(1);
-		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
-	}
-
-	.inputs input:focus::placeholder {
-		opacity: 0;
-		transform: scale(0);
-	}
-
-</style>

package/src/main.css

@@ -1,34 +0,0 @@
-@import url("_styles/variables/colors.css");
-@import url("_styles/variables/spacing.css");
-@import url("_styles/variables/font-sizes.css");
-@import url("_styles/variables/shadow.css");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	:root {
-		/* text */
-		--base-line-height: 1.6;
-		--base-font: museo-sans, sans-serif;
-	}
-}
-
-body {
-	font-family: var(--base-font);
-}
-
-*:focus,
-*:active {
-	outline: none;
-}
-
-input,
-textarea,
-button,
-select,
-label,
-a {
-	-webkit-tap-highlight-color: transparent;
-}

package/src/shims-vue.d.ts

@@ -1,5 +0,0 @@
-declare module "*.vue" {
-	import { defineComponent } from "vue";
-	const component: ReturnType<typeof defineComponent>;
-	export default component;
-}