@x33025/sveltely 0.0.22 → 0.0.24

package/dist/components/SegmentedPicker.svelte

@@ -16,11 +16,12 @@
 </script>
 
 <div
-	class={`hstack w-fit gap-1 ${className}`}
+	class={`hstack w-fit ${className}`}
 	style="
 		padding: var(--segmented-picker-outer-padding);
 		border-radius: var(--segmented-picker-border-radius);
-			background: var(--segmented-picker-background);
+		background: var(--segmented-picker-background);
+		gap: var(--segmented-picker-item-gap);
 	"
 >
 	{#each options as option}

package/dist/index.d.ts

@@ -10,4 +10,3 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
-export { default as TabView } from './components/TabView';

package/dist/index.js

@@ -10,4 +10,3 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
-export { default as TabView } from './components/TabView';

package/dist/style/index.css

@@ -79,6 +79,7 @@
 		--segmented-picker-background: var(--color-zinc-100);
 		--segmented-picker-active-background: var(--color-white);
 		--segmented-picker-active-shadow: var(--shadow-xs);
+		--segmented-picker-item-gap: var(--spacing);
 		--segmented-picker-inner-border-radius: max(
 			0px,
 			calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))

package/dist/style.css

@@ -9,7 +9,6 @@
       "Courier New", monospace;
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-zinc-50: oklch(98.5% 0 0);
@@ -23,8 +22,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
@@ -224,8 +221,8 @@
   .z-50 {
     z-index: 50;
   }
-  .ml-auto {
-    margin-left: auto;
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
   }
   .block {
     display: block;
@@ -286,9 +283,6 @@
   .items-center {
     align-items: center;
   }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -346,9 +340,6 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -386,10 +377,6 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -402,15 +389,9 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .text-gray-500 {
-    color: var(--color-gray-500);
-  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
-  .text-gray-900 {
-    color: var(--color-gray-900);
-  }
   .text-zinc-500 {
     color: var(--color-zinc-500);
   }
@@ -587,6 +568,7 @@
     --segmented-picker-background: var(--color-zinc-100);
     --segmented-picker-active-background: var(--color-white);
     --segmented-picker-active-shadow: var(--shadow-xs);
+    --segmented-picker-item-gap: var(--spacing);
     --segmented-picker-inner-border-radius: max(
 			0px,
 			calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))

package/package.json

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

package/dist/components/TabView/Tab.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		value: string;
-		disabled?: boolean;
-		class?: string;
-		activeClass?: string;
-		children?: Snippet;
-	}
-
-	let {
-		value,
-		disabled = false,
-		class: className = '',
-		activeClass = '',
-		children
-	}: Props = $props();
-
-	const context = getContext<{
-		active: string;
-		setActive: (value: string) => void;
-		registerTab?: (value: string) => void;
-	}>('tabView');
-
-	const isActive = $derived(context.active === value);
-
-	$effect(() => {
-		context.registerTab?.(value);
-	});
-
-	function handleClick() {
-		if (disabled) return;
-		context.setActive(value);
-	}
-</script>
-
-<button
-	id={'tab-' + value}
-	type="button"
-	role="tab"
-	aria-selected={isActive}
-	aria-controls={'panel-' + value}
-	{disabled}
-	class="{className} {isActive ? activeClass : ''}"
-	onclick={handleClick}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</button>

package/dist/components/TabView/Tab.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    value: string;
-    disabled?: boolean;
-    class?: string;
-    activeClass?: string;
-    children?: Snippet;
-}
-declare const Tab: import("svelte").Component<Props, {}, "">;
-type Tab = ReturnType<typeof Tab>;
-export default Tab;

package/dist/components/TabView/TabPanel.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		value: string;
-		class?: string;
-		children?: Snippet;
-	}
-
-	let { value, class: className = '', children }: Props = $props();
-
-	const context = getContext<{
-		active: string;
-		setActive: (value: string) => void;
-	}>('tabView');
-
-	const isActive = $derived(context.active === value);
-</script>
-
-{#if isActive}
-	<div
-		id={"panel-" + value}
-		role="tabpanel"
-		aria-labelledby={"tab-" + value}
-		class={className}
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-{/if}

package/dist/components/TabView/TabPanel.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    value: string;
-    class?: string;
-    children?: Snippet;
-}
-declare const TabPanel: import("svelte").Component<Props, {}, "">;
-type TabPanel = ReturnType<typeof TabPanel>;
-export default TabPanel;

package/dist/components/TabView/TabView.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { setContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		active: string;
-		onChange?: (value: string) => void;
-		tabs?: Snippet;
-		panels?: Snippet;
-	}
-
-	let { active = $bindable(), onChange, tabs, panels }: Props = $props();
-
-	function setActive(value: string) {
-		if (active === value) return;
-		active = value;
-		onChange?.(value);
-	}
-
-	setContext('tabView', {
-		get active() {
-			return active;
-		},
-		setActive
-	});
-</script>
-
-{#if tabs}
-	<div role="tablist">
-		{@render tabs()}
-	</div>
-{/if}
-
-{#if panels}
-	<div>
-		{@render panels()}
-	</div>
-{/if}

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

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    active: string;
-    onChange?: (value: string) => void;
-    tabs?: Snippet;
-    panels?: Snippet;
-}
-declare const TabView: import("svelte").Component<Props, {}, "active">;
-type TabView = ReturnType<typeof TabView>;
-export default TabView;

package/dist/components/TabView/index.d.ts

@@ -1,8 +0,0 @@
-import TabViewRoot from './TabView.svelte';
-import Tab from './Tab.svelte';
-import TabPanel from './TabPanel.svelte';
-declare const TabView: typeof TabViewRoot & {
-    Tab: typeof Tab;
-    Panel: typeof TabPanel;
-};
-export default TabView;

package/dist/components/TabView/index.js

@@ -1,7 +0,0 @@
-import TabViewRoot from './TabView.svelte';
-import Tab from './Tab.svelte';
-import TabPanel from './TabPanel.svelte';
-const TabView = TabViewRoot;
-TabView.Tab = Tab;
-TabView.Panel = TabPanel;
-export default TabView;