@celar-ui/svelte 1.4.0 → 1.6.0

package/dist/buttons/ExpandedTextButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import './styles/expanded_text_button.scss';
+	import TextBaseButton from './TextBaseButton.svelte';
+	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+
+	let { gap = 'var(--gap)', ...rest }: TextBaseButtonProps = $props();
+</script>
+
+<TextBaseButton {...rest} {gap} data-button-text-expanded />

package/dist/buttons/ExpandedTextButton.svelte.d.ts

@@ -0,0 +1,5 @@
+import './styles/expanded_text_button.scss';
+import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+declare const ExpandedTextButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
+type ExpandedTextButton = ReturnType<typeof ExpandedTextButton>;
+export default ExpandedTextButton;

package/dist/buttons/TextBaseButton.svelte

@@ -6,13 +6,21 @@
 
 	export type TextBaseButtonProps = BaseButtonProps & {
 		icon?: Snippet;
+		gap?: string;
 	};
 
-	let { children, loading, icon, active = false, ...rest }: TextBaseButtonProps = $props();
+	let {
+		children,
+		loading,
+		icon,
+		active = false,
+		gap = 'var(--gap--half)',
+		...rest
+	}: TextBaseButtonProps = $props();
 </script>
 
 {#snippet baseChildren()}
-	<div class="button-body" style:visibility={loading ? 'hidden' : 'initial'}>
+	<div class="button-body" style:visibility={loading ? 'hidden' : 'initial'} style:--body-gap={gap}>
 		{#if icon}
 			<span class="button-icon">
 				{@render icon()}
@@ -42,7 +50,7 @@
 .button-body {
   display: flex;
   align-items: center;
-  gap: var(--gap--half);
+  gap: var(--body-gap);
   padding: 0 var(--gap);
 }
 .button-body .button-content {

package/dist/buttons/TextBaseButton.svelte.d.ts

@@ -2,6 +2,7 @@ import type { BaseButtonProps } from './BaseButton.svelte';
 import type { Snippet } from 'svelte';
 export type TextBaseButtonProps = BaseButtonProps & {
     icon?: Snippet;
+    gap?: string;
 };
 declare const TextBaseButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type TextBaseButton = ReturnType<typeof TextBaseButton>;

package/dist/buttons/styles/expanded_text_button.scss

@@ -0,0 +1,20 @@
+[data-button-text-expanded] {
+	transition-property: background-color, opacity, filter;
+	background-color: transparent;
+	color: var(--color-onPrimaryContainer);
+	display: block;
+	width: 100%;
+	overflow: hidden;
+
+	&:not(:disabled, [data-active='true']):hover {
+		background-color: var(--color-primaryContainer);
+	}
+
+	&:not(:disabled):active {
+		filter: brightness(0.95);
+	}
+
+	&[data-active='true'] {
+		background-color: var(--color-inversePrimary);
+	}
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './utils.js';
 export { default as TextButton } from './buttons/TextButton.svelte';
+export { default as ExpandedTextButton } from './buttons/ExpandedTextButton.svelte';
 export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
 export { default as FilledButton } from './buttons/FilledButton.svelte';
 export { default as OutlinedButton } from './buttons/OutlinedButton.svelte';
@@ -34,3 +35,4 @@ export { default as AppBar } from './navigation/AppBar.svelte';
 export { default as NavigationBar } from './navigation/NavigationBar.svelte';
 export { default as NavigationBarButton } from './navigation/NavigationBarButton.svelte';
 export { default as NavigationDrawer } from './navigation/NavigationDrawer.svelte';
+export { default as AdaptiveSidebar } from './navigation/AdaptiveSidebar.svelte';

package/dist/index.js

@@ -1,6 +1,7 @@
 // Reexport your entry components here
 export * from './utils.js';
 export { default as TextButton } from './buttons/TextButton.svelte';
+export { default as ExpandedTextButton } from './buttons/ExpandedTextButton.svelte';
 export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
 export { default as FilledButton } from './buttons/FilledButton.svelte';
 export { default as OutlinedButton } from './buttons/OutlinedButton.svelte';
@@ -35,3 +36,4 @@ export { default as AppBar } from './navigation/AppBar.svelte';
 export { default as NavigationBar } from './navigation/NavigationBar.svelte';
 export { default as NavigationBarButton } from './navigation/NavigationBarButton.svelte';
 export { default as NavigationDrawer } from './navigation/NavigationDrawer.svelte';
+export { default as AdaptiveSidebar } from './navigation/AdaptiveSidebar.svelte';

package/dist/navigation/AdaptiveSidebar.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface AdaptiveSidebarProps extends HTMLAttributes<HTMLElement> {
+		open?: boolean;
+		collapsedSize?: string;
+		expandedSize?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		collapsedSize = '80px',
+		expandedSize = '300px',
+		children,
+		...rest
+	}: AdaptiveSidebarProps = $props();
+</script>
+
+<div>
+	<input data-adaptive-sidebar-state type="checkbox" aria-hidden="true" checked={open} />
+
+	<div
+		data-adaptive-sidebar-backdrop
+		onclick={() => (open = false)}
+		onkeyup={(e) => {
+			if (e.key == 'Escape') open = false;
+		}}
+		aria-label="close adaptive sidebar"
+		role="button"
+		tabindex="0"
+	></div>
+
+	<aside
+		{...rest}
+		data-adaptive-sidebar
+		style:--collapsed={collapsedSize}
+		style:--expanded={expandedSize}
+		style:--width={open ? expandedSize : collapsedSize}
+	>
+		{@render children?.()}
+	</aside>
+</div>
+
+<style>:root {
+  --gap--x3: 3rem;
+  --gap--x2: 2rem;
+  --gap: 1rem;
+  --gap--md: 0.7rem;
+  --gap--half: 0.5rem;
+  --gap--sm: 0.3rem;
+  --gap--xs: 0.1rem;
+  --break--xs: 540px;
+  --break--sm: 960px;
+  --break--md: 1320px;
+}
+
+[data-adaptive-sidebar-backdrop] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backdrop-filter: blur(var(--blur-length));
+          backdrop-filter: blur(var(--blur-length));
+  background-color: rgba(var(--color-onBackground--rgb), 0.2);
+  z-index: 100;
+  visibility: hidden;
+  opacity: 0;
+  transition-property: opacity, visibility;
+  transition-timing-function: ease-in;
+  transition-duration: var(--transition-dur);
+}
+
+[data-adaptive-sidebar] {
+  box-sizing: border-box;
+  z-index: 100;
+  position: relative;
+  height: 100vh;
+  width: var(--expanded);
+  background-color: var(--color-surface);
+  padding: var(--gap);
+  border-top-right-radius: var(--gap--x2);
+  border-bottom-right-radius: var(--gap--x2);
+  max-width: 80vw;
+  overflow: hidden;
+  transition-property: transform, width, opacity, visibility;
+  transition-timing-function: ease-in-out;
+  transition-duration: var(--transition-dur);
+}
+
+[data-adaptive-sidebar-state] {
+  display: none;
+}
+
+@media screen and (max-width: 540px) {
+  [data-adaptive-sidebar] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-shadow: 0 0rem var(--gap) var(--color-shadow--md);
+    transform: translateX(-100%);
+    opacity: 0;
+    visibility: hidden;
+  }
+  [data-adaptive-sidebar-state]:checked ~ [data-adaptive-sidebar-backdrop] {
+    opacity: 1;
+    visibility: visible;
+  }
+  [data-adaptive-sidebar-state]:checked ~ [data-adaptive-sidebar] {
+    transform: translateX(0);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+@media screen and (min-width: 541px) {
+  [data-adaptive-sidebar] {
+    width: var(--width);
+  }
+}</style>

package/dist/navigation/AdaptiveSidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface AdaptiveSidebarProps extends HTMLAttributes<HTMLElement> {
+    open?: boolean;
+    collapsedSize?: string;
+    expandedSize?: string;
+}
+declare const AdaptiveSidebar: import("svelte").Component<AdaptiveSidebarProps, {}, "open">;
+type AdaptiveSidebar = ReturnType<typeof AdaptiveSidebar>;
+export default AdaptiveSidebar;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -17,7 +17,7 @@
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && eslint .",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",