@hyvor/design 2.0.8-beta.4 → 2.0.8

package/dist/cloud/ResourceCreator/Accordian.svelte

@@ -94,10 +94,8 @@
 					{#if loading}
 						<Loader size="small" />
 					{/if}
-					<Button
-						size="large"
-						onclick={onButtonClick}
-						disabled={loading || buttonDisabled}>{buttonText}</Button
+					<Button size="large" onclick={onButtonClick} disabled={loading || buttonDisabled}
+						>{buttonText}</Button
 					>
 				</div>
 			</div>

package/dist/components/Checkbox/Checkbox.svelte

@@ -106,6 +106,9 @@
 		border-radius: 2px;
 		outline: 1px solid var(--accent);
 		position: relative;
+		transition:
+			0.2s background-color,
+			0.2s box-shadow;
 	}
 
 	span.placeholder:focus-visible {
@@ -113,10 +116,10 @@
 	}
 
 	/* the check icon */
-	span.placeholder:after {
+	span.placeholder::after {
 		content: '';
 		position: absolute;
-		display: none;
+		/* display: none; */
 
 		/* check icon */
 		left: 4.5px;
@@ -127,6 +130,7 @@
 		border-width: 0 3px 3px 0;
 		transform: rotate(45deg);
 		transition: 0.2s box-shadow;
+		opacity: 0;
 	}
 
 	.checkbox-wrap:hover span.placeholder {
@@ -142,20 +146,22 @@
 	}
 
 	input:checked ~ span.placeholder:after {
-		display: block;
+		opacity: 1;
 	}
-
-	/* disabled styles */
 	input:disabled ~ span.placeholder {
 		background-color: var(--accent-light);
-		border: none !important;
-		opacity: 0.2;
-		cursor: not-allowed;
 		box-shadow: none !important;
+		outline: rgba(0, 0, 0, 0.1);
 	}
 
-	input:disabled:checked ~ span.placeholder:after {
-		display: none;
-		pointer-events: none;
+	input:disabled ~ span.placeholder::after {
+		opacity: 0.6;
+		border-color: var(--accent-text);
+	}
+
+	/* If the wrapper contains a disabled input, cursor changes to not-allowed */
+	.checkbox-wrap:has(input:disabled),
+	.checkbox-wrap:has(input:disabled) label {
+		cursor: not-allowed;
 	}
 </style>

package/dist/components/Select/Select.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		value?: string;
+		options?: Option[];
+		state?: 'default' | 'error' | 'success' | 'warning';
+		placeholder?: string;
+		size?: 'small' | 'medium' | 'large' | 'x-small';
+		children?: Snippet;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		block?: boolean;
+		disabled?: boolean;
+	}
+
+	export interface Option {
+		value: string;
+		label: string;
+	}
+
+	let {
+		value = $bindable(''),
+		options = [],
+		state = 'default',
+		placeholder,
+		size = 'medium',
+		children,
+		start,
+		end,
+		block = true,
+		disabled = false,
+		...rest
+	}: Props = $props();
+</script>
+
+<div class="input-wrap state-{state} size-{size}" class:block class:disabled>
+	{#if start}
+		<span class="slot start">
+			{@render start?.()}
+		</span>
+	{/if}
+	<select bind:value {disabled} {...rest}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{#if placeholder}
+				<option value="" disabled selected={!value}>{placeholder}</option>
+			{/if}
+
+			{#each options as option}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		{/if}
+	</select>
+	{#if end}
+		<span class="slot end">
+			{@render end?.()}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.input-wrap {
+		display: inline-flex;
+		align-items: center;
+		height: 30px;
+		padding: 0 15px;
+		border-radius: 20px;
+		background: var(--input);
+		transition: 0.2s box-shadow;
+		font-size: 14px;
+		--local-shadow-size: 2px;
+	}
+
+	.input-wrap:focus-within {
+		outline: 0;
+		box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
+	}
+
+	select {
+		flex: 1;
+		width: 100%;
+		border: none;
+		font-family: inherit;
+		font-size: inherit;
+		background: transparent;
+		padding: 0;
+		margin: 0;
+		color: inherit;
+		height: 100%;
+		cursor: pointer;
+	}
+	select:focus {
+		outline: none;
+	}
+
+	/* Sizes for Select */
+	.input-wrap.size-small {
+		height: 26px;
+		font-size: 12px;
+		--local-shadow-size: 1px;
+	}
+
+	.input-wrap.size-large {
+		height: 36px;
+		font-size: 16px;
+	}
+
+	.input-wrap.size-x-small {
+		height: 20px;
+		font-size: 12px;
+		--local-shadow-size: 1px;
+	}
+
+	.input-wrap.size-medium {
+		height: 30px;
+		font-size: 14px;
+	}
+
+	/*  styles for states */
+	.input-wrap.state-error {
+		box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
+	}
+
+	.input-wrap.state-error:focus-within {
+		box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
+	}
+
+	.input-wrap.state-success {
+		box-shadow: 0 0 0 2px var(--green-light);
+	}
+
+	.input-wrap.state-success:focus-within {
+		box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
+	}
+
+	.input-wrap.state-warning {
+		box-shadow: 0 0 0 2px var(--orange-light);
+	}
+
+	.input-wrap.state-warning:focus-within {
+		box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
+	}
+
+	.input-wrap.block {
+		display: flex;
+		width: 100%;
+	}
+
+	.slot {
+		display: inline-flex;
+		align-items: center;
+		color: var(--text-light);
+	}
+
+	.slot.start {
+		margin-right: 8px;
+	}
+
+	.slot.end {
+		margin-left: 8px;
+	}
+
+	.input-wrap.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.input-wrap.disabled select {
+		cursor: not-allowed;
+		/* pointer-events: none; */
+	}
+</style>

package/dist/components/Select/Select.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+export interface Option {
+    value: string;
+    label: string;
+}
+interface Props {
+    value?: string;
+    options?: Option[];
+    state?: 'default' | 'error' | 'success' | 'warning';
+    placeholder?: string;
+    size?: 'small' | 'medium' | 'large' | 'x-small';
+    children?: Snippet;
+    start?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    block?: boolean;
+    disabled?: boolean;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/index.d.ts

@@ -40,6 +40,7 @@ export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
+export { default as Select } from './Select/Select.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableRow } from './Table/TableRow.svelte';
 export { default as TableCell } from './Table/TableCell.svelte';

package/dist/components/index.js

@@ -40,6 +40,7 @@ export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
+export { default as Select } from './Select/Select.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableRow } from './Table/TableRow.svelte';
 export { default as TableCell } from './Table/TableCell.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.8-beta.4",
+	"version": "2.0.8",
 	"license": "MIT",
 	"private": false,
 	"repository": {