bonkers-ui 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

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

@@ -10,6 +10,7 @@ export enum EButtonTypes {
 	LINK = "link",
 }
 export enum EButtonSizes {
+	DEFAULT = "default",
 	SMALL = "sm",
 	MEDIUM = "md",
 	LARGE = "lg"

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

@@ -1,6 +1,6 @@
 <template>
 	<button
-		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation"
+		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation items-center"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
@@ -16,8 +16,9 @@
 			kind === EButtonTypes.ERROR_OVERLAY
 				&& 'text-error border border-error hover:bg-error-600 hover:border-transparent hover:text-white active:bg-error-700 active:border-transparent active:text-white disabled:text-error-300 disabled:border-error-300',
 			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
-			(!size || size === EButtonSizes.MEDIUM) && 'py-sm px-md',
+			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
 			size === EButtonSizes.SMALL && 'py-xs px-md',
+			size === EButtonSizes.MEDIUM && 'py-xs px-xs',
 			size === EButtonSizes.LARGE && 'py-md px-md',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

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

@@ -18,10 +18,6 @@ export default {
 			options: Object.values(EInputTypes),
 			description: "The input kinds",
 		},
-		fullWidth: {
-			control: { type: "boolean" },
-			description: "The full width size",
-		},
 		disabled: {
 			control: { type: "boolean" },
 			description: "The Element disabled state",
@@ -29,7 +25,6 @@ export default {
 	},
 	args: {
 		placeholder: "Placeholder",
-		fullWidth: false,
 		kind: undefined,
 		disabled: false,
 	}

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

@@ -8,30 +8,26 @@
 			{{ heading }}
 		</ui-typography>
 		<div
-			class="ui-input__wrapper grid rounded-lg border bg-white max-w-xs items-center p-sm gap-xs"
+			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
 			:class="[
 				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
 				kind === EInputTypes.PRIMARY && 'border-primary',
 				kind === EInputTypes.ERROR && 'border-error',
 
 				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
-
-				fullWidth && 'max-w-full',
 			]"
 		>
-			<div class="icon-wrapper">
-				<slot name="prefix-icon" />
-			</div>
+			<slot name="prefix-icon" />
+			
 			<input
-				class="bg-transparent border-0 outline-none"
+				class="bg-transparent border-0 outline-none w-full"
 				type="text"
 				:placeholder="placeholder"
 				:value="modelValue"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
-			<div class="icon-wrapper">
-				<slot name="postfix-icon" />
-			</div>
+			
+			<slot name="postfix-icon" />
 		</div>
 		<ui-typography
 			v-if="subLabel"
@@ -51,7 +47,6 @@
 		placeholder?: string;
 		modelValue: string;
 		disabled?: boolean;
-		fullWidth?: boolean;
 		kind?: EInputTypes;
 		heading?: string;
 		subLabel?: string;
@@ -61,10 +56,6 @@
 </script>
 
 <style scoped>
-	.ui-input__wrapper {
-		grid-template-columns: auto 1fr auto;
-	}
-
 	.ui-input__wrapper input::placeholder {
 		color: var(--color-secondary-alt-500);
 		font-style: italic;

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

@@ -10,6 +10,10 @@ export default {
 			control: { type: "boolean" },
 			description: "The Element disabled state",
 		},
+		alignCenter: {
+			control: { type: "boolean" },
+			description: "The Elements center align state",
+		},
 		invertOrder: {
 			control: { type: "boolean" },
 			description: "The Element order state",
@@ -19,6 +23,7 @@ export default {
 		slot: "default text",
 		disabled: false,
 		invertOrder: false,
+		alignCenter: false,
 	},
 };
 

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

@@ -14,9 +14,12 @@
 			:class="[
 				disabled && 'pointer-events-none ui-toggle_disabled',
 				invertOrder && 'flex-row-reverse',
+				alignCenter && 'items-center'
 			]"
 		>
-			<span class="ui-input__input-wrapper block relative h-md">
+			<span
+				class="ui-input__input-wrapper block relative h-md"
+			>
 				<input
 					type="checkbox"
 					class="appearance-none absolute w-0 h-0 border-0"
@@ -64,6 +67,7 @@
 		modelValue: boolean;
 		disabled?: boolean;
 		invertOrder?: boolean;
+		alignCenter?: boolean;
 	}>();
 
 	defineEmits<{