@x33025/sveltely 0.0.37 → 0.0.39

package/dist/components/SegmentedPicker.svelte

@@ -7,10 +7,12 @@
 	let {
 		options,
 		value = $bindable(''),
+		disabled = false,
 		class: className = ''
 	}: {
 		options: Option[];
 		value: string;
+		disabled?: boolean;
 		class?: string;
 	} = $props();
 </script>
@@ -22,6 +24,8 @@
 		border-radius: var(--segmented-picker-border-radius);
 		background: var(--segmented-picker-background);
 		gap: var(--segmented-picker-item-gap);
+		opacity: {disabled ? '0.5' : '1'};
+		filter: {disabled ? 'grayscale(1)' : 'none'};
 	"
 >
 	{#each options as option}
@@ -38,11 +42,13 @@
 		{:else}
 			<button
 				type="button"
+				{disabled}
 				style="
 					padding: var(--segmented-picker-inner-padding);
 					border-radius: var(--segmented-picker-inner-border-radius);
 				"
 				onclick={() => {
+					if (disabled) return;
 					value = option.value;
 				}}
 			>

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

@@ -5,6 +5,7 @@ type Option = {
 type $$ComponentProps = {
     options: Option[];
     value: string;
+    disabled?: boolean;
     class?: string;
 };
 declare const SegmentedPicker: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Sheet/Sheet.svelte

@@ -7,8 +7,6 @@
 		onClose?: () => void;
 		class?: string;
 		maxWidth?: string;
-		header?: Snippet;
-		footer?: Snippet;
 		children?: Snippet;
 	}
 
@@ -18,8 +16,6 @@
 		onClose,
 		class: className = '',
 		maxWidth = '32rem',
-		header,
-		footer,
 		children
 	}: Props = $props();
 
@@ -53,23 +49,13 @@
 			aria-modal="true"
 			aria-label={label}
 			style={`border-radius: var(--sheet-border-radius); box-shadow: var(--sheet-shadow); max-width: ${maxWidth};`}
-			class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-white ring-1 ring-zinc-950/10 {className}"
+			class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-[var(--sheet-background)] ring-1 ring-[var(--sheet-border-color)] {className}"
 		>
-			{#if header}
-				<div class="border-b border-gray-200/70" style="padding: var(--sheet-content-padding);">
-					{@render header()}
-				</div>
-			{/if}
 			<div class="flex-1 overflow-auto" style="padding: var(--sheet-content-padding);">
 				{#if children}
 					{@render children()}
 				{/if}
 			</div>
-			{#if footer}
-				<div class="border-t border-gray-200/70" style="padding: var(--sheet-content-padding);">
-					{@render footer()}
-				</div>
-			{/if}
 		</div>
 	</div>
 {/if}

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

@@ -5,8 +5,6 @@ interface Props {
     onClose?: () => void;
     class?: string;
     maxWidth?: string;
-    header?: Snippet;
-    footer?: Snippet;
     children?: Snippet;
 }
 declare const Sheet: import("svelte").Component<Props, {}, "open">;

package/dist/style/index.css

@@ -32,21 +32,6 @@
 		@apply bg-gray-200/70;
 	}
 
-	.hstack > .divider {
-		width: 1px;
-		align-self: stretch;
-	}
-
-	.vstack > .divider {
-		height: 1px;
-		width: 100%;
-	}
-
-	.overflow-auto > .vstack,
-	.overflow-auto > .hstack {
-		flex-shrink: 0;
-	}
-
 	.chip-input-action {
 		width: calc(var(--chip-input-font-size) + 16px);
 		height: calc(var(--chip-input-font-size) + 16px);
@@ -74,6 +59,7 @@
 		--sheet-content-padding: calc(var(--spacing) * 4);
 
 		--sheet-background: var(--color-white);
+		--sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
 		--sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
 		--sheet-blur: var(--blur-sm);
 		--sheet-shadow: var(--shadow-md);
@@ -124,3 +110,18 @@
 		--pagination-gap: calc(var(--spacing) * 4);
 	}
 }
+
+.hstack > .divider {
+	width: 1px;
+	align-self: stretch;
+}
+
+.vstack > .divider {
+	height: 1px;
+	width: 100%;
+}
+
+.overflow-auto > .vstack,
+.overflow-auto > .hstack {
+	flex-shrink: 0;
+}

package/dist/style.css

@@ -328,10 +328,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -362,6 +358,9 @@
   .bg-\[var\(--chip-input-background\)\] {
     background-color: var(--chip-input-background);
   }
+  .bg-\[var\(--sheet-background\)\] {
+    background-color: var(--sheet-background);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -440,11 +439,8 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-zinc-950\/10 {
-    --tw-ring-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
-    }
+  .ring-\[var\(--sheet-border-color\)\] {
+    --tw-ring-color: var(--sheet-border-color);
   }
   .outline {
     outline-style: var(--tw-outline-style);
@@ -482,6 +478,9 @@
     --tw-blur: blur(var(--blur-xs));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .backdrop-filter {
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -573,17 +572,6 @@
       background-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
     }
   }
-  .hstack > .divider {
-    width: 1px;
-    align-self: stretch;
-  }
-  .vstack > .divider {
-    height: 1px;
-    width: 100%;
-  }
-  .overflow-auto > .vstack,	.overflow-auto > .hstack {
-    flex-shrink: 0;
-  }
   .chip-input-action {
     width: calc(var(--chip-input-font-size) + 16px);
     height: calc(var(--chip-input-font-size) + 16px);
@@ -601,6 +589,10 @@
     --sheet-border-radius: var(--radius-md);
     --sheet-content-padding: calc(var(--spacing) * 4);
     --sheet-background: var(--color-white);
+    --sheet-border-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
+    }
     --sheet-overlay: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
@@ -647,6 +639,17 @@
     --pagination-gap: calc(var(--spacing) * 4);
   }
 }
+.hstack > .divider {
+  width: 1px;
+  align-self: stretch;
+}
+.vstack > .divider {
+  height: 1px;
+  width: 100%;
+}
+.overflow-auto > .vstack, .overflow-auto > .hstack {
+  flex-shrink: 0;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.37",
+	"version": "0.0.39",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",