@hyvor/design 2.0.8-beta.3 → 2.0.8

package/dist/cloud/HyvorBar/BarUser.svelte

@@ -8,7 +8,11 @@
 	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 
 	const cloudContext = $derived(getCloudContext());
-	const logoutUrl = `${cloudContext.instance}/account/logout`;
+	const logoutUrl = $derived(
+		cloudContext.deployment === 'cloud'
+			? `${cloudContext.instance}/account/logout`
+			: '/api/oidc/logout'
+	);
 </script>
 
 <div class="wrap">

package/dist/cloud/HyvorBar/HyvorBar.svelte

@@ -80,16 +80,21 @@
 					{getName()}
 				</span>
 			</a>
-			<BarProducts mobile={mobileShow} />
 
-			{#if organization}
-				<BarOrganization />
+			{#if deployment === 'cloud'}
+				<BarProducts mobile={mobileShow} />
+
+				{#if organization}
+					<BarOrganization />
+				{/if}
+				<BarLicense name={getName()} />
 			{/if}
-			<BarLicense name={getName()} />
 		</div>
 		<div class="center"></div>
 		<div class="right">
-			<BarNotice />
+			{#if deployment === 'cloud'}
+				<BarNotice />
+			{/if}
 
 			<div class="hidden-on-mobile">
 				{#if deployment === 'cloud'}

package/dist/cloud/ResourceCreator/ResourceCreator.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import IconX from '@hyvor/icons/IconX';
-	import Button from '../../components/Button/Button.svelte';
-	import { onMount, type ComponentProps } from 'svelte';
 	import {
 		getCloudContext,
 		type CloudContextOrganization
@@ -56,7 +54,7 @@
 		ondisplay
 	}: Props = $props();
 
-	const { callbacks, organization } = $derived(getCloudContext());
+	const { callbacks, organization, deployment } = $derived(getCloudContext());
 
 	let orgName = $state('');
 	let orgNameError = $state('');
@@ -130,62 +128,64 @@
 		</div>
 
 		<div class="content">
-			<Accordian
-				title="Organization"
-				belowTitle={organization?.name}
-				show={organizationAccordianOpen}
-				footer={!organization}
-				buttonText="Create Organization"
-				onButtonClick={handleOrganizationCreation}
-				onToggle={() => {
-					organizationAccordianOpen = !organizationAccordianOpen;
+			{#if deployment === 'cloud'}
+				<Accordian
+					title="Organization"
+					belowTitle={organization?.name}
+					show={organizationAccordianOpen}
+					footer={!organization}
+					buttonText="Create Organization"
+					onButtonClick={handleOrganizationCreation}
+					onToggle={() => {
+						organizationAccordianOpen = !organizationAccordianOpen;
 
-					if (organizationAccordianOpen && contentAccordianOpen) {
-						contentAccordianOpen = false;
-					}
-				}}
-				toggleLocked={creatingResource}
-				loading={creatingOrganization}
-			>
-				{#if organization}
-					<div class="org-switcher">
-						<OrganizationSwitcher
-							manageButton={false}
-							createButtonText="Create new organization"
-							createButtonProps={{
-								size: 'medium',
-								color: 'input'
-							}}
-						/>
-					</div>
-				{:else}
-					<div class="org-creator">
-						<FormControl>
-							<TextInput
-								bind:value={orgName}
-								bind:input={orgNameInput}
-								block
-								placeholder="Organization Name"
-								disabled={creatingOrganization}
-								onkeyup={(e) => {
-									if (e.key === 'Enter') {
-										handleOrganizationCreation();
-									}
+						if (organizationAccordianOpen && contentAccordianOpen) {
+							contentAccordianOpen = false;
+						}
+					}}
+					toggleLocked={creatingResource}
+					loading={creatingOrganization}
+				>
+					{#if organization}
+						<div class="org-switcher">
+							<OrganizationSwitcher
+								manageButton={false}
+								createButtonText="Create new organization"
+								createButtonProps={{
+									size: 'medium',
+									color: 'input'
 								}}
 							/>
+						</div>
+					{:else}
+						<div class="org-creator">
+							<FormControl>
+								<TextInput
+									bind:value={orgName}
+									bind:input={orgNameInput}
+									block
+									placeholder="Organization Name"
+									disabled={creatingOrganization}
+									onkeyup={(e) => {
+										if (e.key === 'Enter') {
+											handleOrganizationCreation();
+										}
+									}}
+								/>
 
-							{#if orgNameError}
-								<Validation state="error">{orgNameError}</Validation>
-							{/if}
-						</FormControl>
+								{#if orgNameError}
+									<Validation state="error">{orgNameError}</Validation>
+								{/if}
+							</FormControl>
 
-						<div class="org-note">
-							<IconInfoCircle size={12} />
-							Organizations can be used across HYVOR products.
+							<div class="org-note">
+								<IconInfoCircle size={12} />
+								Organizations can be used across HYVOR products.
+							</div>
 						</div>
-					</div>
-				{/if}
-			</Accordian>
+					{/if}
+				</Accordian>
+			{/if}
 
 			<Accordian
 				title={resourceTitle}

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.3",
+	"version": "2.0.8",
 	"license": "MIT",
 	"private": false,
 	"repository": {