svelte-ag 0.0.2-dev.73 → 0.0.2-dev.81

package/src/lib/components/sidebar/sidebar-menu-sub.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-sidebar="menu-sub"
+	class={cn(
+		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>

package/src/lib/components/sidebar/sidebar-menu.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-sidebar="menu"
+	class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>

package/src/lib/components/sidebar/sidebar-provider.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import * as Tooltip from '$shadcn/tooltip/index.js';
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';
+  import { setSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    open = $bindable({
+      left: true,
+      right: true
+    }),
+    onOpenChange = () => {},
+    class: className,
+    style,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: {
+      left: boolean;
+      right: boolean;
+    };
+    onOpenChange?: (open: boolean, side: 'left' | 'right') => void;
+  } = $props();
+
+  const sidebar = setSidebar({
+    open: () => open,
+    setOpen: (value: boolean, side: 'left' | 'right' = 'left') => {
+      open[side] = value;
+      onOpenChange(value, side);
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}-${side}=${open[side]}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }
+  });
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+  <div
+    style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+    class={cn(
+      `
+        group/sidebar-wrapper flex w-full flex-auto
+        has-[[data-variant=inset]]:bg-sidebar
+      `,
+      className
+    )}
+    bind:this={ref}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+</Tooltip.Provider>

package/src/lib/components/sidebar/sidebar-rail.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    side = 'left',
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    side?: 'left' | 'right';
+  } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<button
+  bind:this={ref}
+  data-sidebar="rail"
+  aria-label="Toggle Sidebar"
+  tabIndex={-1}
+  onclick={() => sidebar.toggle(side)}
+  title="Toggle Sidebar"
+  class={cn(
+    `
+      hover:after:bg-sidebar-border
+      absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear
+      group-data-[side=left]:-right-4
+      group-data-[side=right]:left-0
+      after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]
+      sm:flex
+    `,
+    `
+      [[data-side=left]_&]:cursor-w-resize
+      [[data-side=right]_&]:cursor-e-resize
+    `,
+    `
+      [[data-side=left][data-state=collapsed]_&]:cursor-e-resize
+      [[data-side=right][data-state=collapsed]_&]:cursor-w-resize
+    `,
+    `
+      group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0
+      group-data-[collapsible=offcanvas]:after:left-full
+    `,
+    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/src/lib/components/sidebar/sidebar-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Separator } from "$shadcn/separator/index.js";
+	import { cn } from "$shadcn/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	{...restProps}
+/>

package/src/lib/components/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Button } from '$shadcn/button/index.js';
+  import { cn } from '$shadcn/utils.js';
+  import PanelLeft from '@lucide/svelte/icons/panel-left';
+  import type { ComponentProps } from 'svelte';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    side = 'left',
+    class: className,
+    onclick,
+    ...restProps
+  }: ComponentProps<typeof Button> & {
+    onclick?: (e: MouseEvent) => void;
+    side?: 'left' | 'right';
+  } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<Button
+  type="button"
+  onclick={(e) => {
+    onclick?.(e);
+    sidebar.toggle(side);
+  }}
+  data-sidebar="trigger"
+  variant="ghost"
+  size="icon"
+  class={cn('h-7 w-7', className)}
+  {...restProps}
+>
+  <PanelLeft />
+  <span class="sr-only">Toggle Sidebar</span>
+</Button>

package/src/lib/components/sidebar/sidebar.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import * as Sheet from '$shadcn/sheet/index.js';
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    side = 'left',
+    variant = 'sidebar',
+    collapsible = 'offcanvas',
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+  } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+  <div
+    data-variant={variant}
+    class={cn(
+      `
+        bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col
+        data-[variant=floating]:border-sidebar-border data-[variant=floating]:rounded-lg data-[variant=floating]:border
+        data-[variant=floating]:shadow
+      `,
+      className
+    )}
+    bind:this={ref}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+{:else if sidebar.isMobile}
+  <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+    <Sheet.Content
+      data-sidebar="sidebar"
+      data-mobile="true"
+      class="
+        bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0
+        [&>button]:hidden
+      "
+      style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+      {side}
+    >
+      <div class="flex h-full w-full flex-col">
+        {@render children?.()}
+      </div>
+    </Sheet.Content>
+  </Sheet.Root>
+{:else}
+  <div
+    bind:this={ref}
+    class={cn(
+      `
+        text-sidebar-foreground peer bg-sidebar relative hidden w-[var(--sidebar-width)] flex-auto flex-grow-0 flex-col
+        overflow-hidden transition-[width] duration-200 ease-linear
+        data-[variant=floating]:border-sidebar-border data-[variant=floating]:rounded-lg data-[variant=floating]:border
+        data-[variant=floating]:shadow
+        data-[collapsible=offcanvas]:w-0
+        md:flex
+      `,
+      // 'data-[side=right]:rotate-180',
+      variant === 'floating' || variant === 'inset'
+        ? `
+          m-2
+          data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon))]
+        `
+        : `
+          data-[collapsible=icon]:w-[var(--sidebar-width-icon)]
+          data-[side=left]:border-r
+          data-[side=right]:border-l
+        `,
+
+      className
+    )}
+    data-sidebar="sidebar"
+    data-state={sidebar.state[side]}
+    data-collapsible={sidebar.state[side] === 'collapsed' ? collapsible : ''}
+    data-variant={variant}
+    data-side={side}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+
+  <!-- <div 
+    bind:this={ref}
+    class={cn(
+      `
+        text-sidebar-foreground group peer relative hidden
+        md:flex
+      `,
+      className
+    )}
+    data-state={sidebar.state[side]}
+    data-collapsible={sidebar.state[side] === 'collapsed' ? collapsible : ''}
+    data-variant={variant}
+    data-side={side}
+                  
+    <div
+      class={cn(
+        `relative w-[var(--sidebar-width)] flex-auto bg-transparent transition-[width] duration-200 ease-linear`,
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? `group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]`
+          : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]'
+      )}
+    ></div>
+    <div
+      class={cn(
+        `
+          absolute inset-y-0 z-10 hidden w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear
+          md:flex
+        `,
+        side === 'left'
+          ? `
+            left-0
+            group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]
+          `
+          : `
+            right-0
+            group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]
+          `,
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? `
+            p-2
+            group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]
+          `
+          : `
+            group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]
+            group-data-[side=left]:border-r
+            group-data-[side=right]:border-l
+          `
+      )}
+      {...restProps}
+  
+      <div
+        data-sidebar="sidebar"
+        class="
+          bg-sidebar flex h-full w-full flex-col overflow-hidden
+          group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg
+          group-data-[variant=floating]:border group-data-[variant=floating]:shadow
+        "
+    
+        {@render children?.()}
+      </div>
+    </div>
+  </div>
+
+     -->
+{/if}

package/src/lib/index.ts

@@ -1 +1,2 @@
-export * from "./utils/index.js";
+export * from './utils/index.js';
+export * from './api/index.js';

package/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
-export * from "./utils.js";
-export * from "./bits.js";
-export * from "./asyncDerived.svelte.js";
+export * from './utils.js';
+export * from './bits.js';
+export * from './asyncDerived.svelte.js';
+export * from './reactive.svelte.js';

package/src/lib/utils/reactive.svelte.ts

@@ -0,0 +1,38 @@
+import { onDestroy } from 'svelte';
+
+/**
+ * Helper function to watch the size of the container element with data-container.
+ * 
+ * @example
+ * ```ts
+ let numCols = $state(3);
+
+  onMount(() => {
+    containerSize((size) => {
+      let cols = 2;
+      if (size.width > 640) {
+        cols = 3;
+      }
+      if (size.width > 768) {
+        cols = 4;
+      }
+      numCols = cols;
+    });
+  });
+ */
+export function containerSize(func: (size: { width: number; height: number }) => void) {
+  const container = document.querySelector('[data-container]') as HTMLDivElement;
+  if (!container) return;
+
+  func({ width: container.offsetWidth, height: container.offsetHeight });
+
+  const observer = new ResizeObserver(() => {
+    func({ width: container.offsetWidth, height: container.offsetHeight });
+  });
+
+  observer.observe(container);
+
+  onDestroy(() => {
+    observer.disconnect();
+  });
+}

package/src/lib/vite/index.ts

@@ -0,0 +1 @@
+export { default as ViteTailwindSources } from './vite-plugin-component-source-collector.js';

package/src/lib/vite/vite-plugin-component-source-collector.ts

@@ -0,0 +1,115 @@
+import type { Plugin, ResolvedConfig } from 'vite';
+import { createFilter } from '@rollup/pluginutils';
+import { writeIfDifferent } from 'ts-ag';
+import path from 'path';
+import type { TransformPluginContext } from 'rollup';
+
+interface Options {
+  /**
+   * File (relative to project root) that will contain one
+   * directory per line (e.g. `node_modules/svelte-ag/components/sidebar`)
+   * Defaults to `component-sources.txt`
+   */
+  outputFile?: string;
+  /**
+   * Filter for source files (default: `/\.svelte$/`)
+   */
+  include?: RegExp | RegExp[];
+
+  run: boolean;
+}
+
+export default function componentSourceCollector(opts: Options = { run: true }): Plugin {
+  if (opts.run === false) return { name: 'disabled' };
+
+  const outFile = opts.outputFile ?? 'component-sources.css';
+
+  /** All unique component directories */
+  const componentFiles = new Set<string>();
+
+  let config: ResolvedConfig;
+
+  /** ---- helpers ---------------------------------------------------------- */
+  let initialTransformDone = false;
+  let initialTransformTimer: NodeJS.Timeout | null = null;
+
+  function scheduleInitialWrite() {
+    if (initialTransformTimer) clearTimeout(initialTransformTimer);
+    initialTransformTimer = setTimeout(() => {
+      if (!initialTransformDone) {
+        writeOutFile();
+        initialTransformDone = true;
+      }
+    }, 1000); // adjust delay as needed
+  }
+  const writeOutFile = async () => {
+    console.log('writing', componentFiles.size);
+    const outPath = path.resolve(config.root, outFile);
+    const lines = [...componentFiles]
+      .map((d) => `@source '${path.relative(path.dirname(outPath), d)}';`)
+      .sort()
+      .join('\n');
+    // await fs.writeFile(outPath, lines, 'utf8');
+    await writeIfDifferent(outPath, lines);
+    console.log('Wrote', lines.length);
+  };
+
+  const classRegex = /class(?:=|:)/;
+
+  /** ---- plugin ----------------------------------------------------------- */
+
+  return {
+    name: 'vite-plugin-component-source-collector',
+    enforce: 'post',
+
+    configResolved(resolved) {
+      config = resolved;
+      // componentFiles.clear();
+      console.log('tailwind-sources:configResolved', config.command);
+    },
+
+    buildStart() {
+      console.log('tailwind-sources:buildStart');
+      // componentFiles.clear();
+    },
+
+    async transform(code, id) {
+      if (id.includes('Account.svelte')) {
+        console.log(id, code, classRegex.test(code));
+      }
+      // componentFiles.add(id);
+      // console.log(componentFiles.size);
+      if (classRegex.test(code)) {
+        componentFiles.add(id);
+
+        // dev‑mode: update file immediately
+        // if (config.command === 'serve') await writeOutFile();
+      }
+      if (!initialTransformDone) {
+        scheduleInitialWrite();
+      }
+    },
+
+    async handleHotUpdate(ctx) {
+      const output = await ctx.read();
+      const id = ctx.file;
+
+      if (classRegex.test(output)) {
+        componentFiles.add(id);
+      } else {
+        componentFiles.delete(id);
+      }
+      await writeOutFile();
+    },
+
+    async buildEnd() {
+      console.log('tailwind-sources:buildEnd');
+      await writeOutFile();
+    },
+
+    async generateBundle() {
+      console.log('tailwind-sources:generateBundle');
+      await writeOutFile();
+    }
+  };
+}

package/dist/lib/components/Typeahead.svelte.d.ts

@@ -1,47 +0,0 @@
-import { type FuseResult } from 'fuse.js';
-import { type Wrap } from '../utils/args';
-export type Args = Wrap<{
-    onInput: (e: InputEvent) => void;
-    searchWith?: () => string;
-    initialValue: () => string;
-    onStopTyping?: (value: string) => void;
-    data: string[];
-}>;
-export declare class Typeahead {
-    private args;
-    private initialValue;
-    private data;
-    private searchWith;
-    private onStopTyping;
-    private debounceDelay;
-    private onInput;
-    private inputE;
-    private wrapperE;
-    private _value;
-    private debounceTimer;
-    private fuse;
-    private _suggestions;
-    private showSuggestions;
-    constructor(args: Args);
-    get elements(): {
-        /**
-         * The input element
-         */
-        input: (node: HTMLInputElement) => void;
-        /**
-         * The wrapper element
-         */
-        wrapper: (node: HTMLDivElement) => void;
-        /**
-         * Suggestion button
-         */
-        suggestionButton: (node: HTMLButtonElement, suggestion: FuseResult<string>) => void;
-        /**
-         * Produces html with matches given the 'highlight' class
-         */
-        matches: (suggestion: FuseResult<string>) => string;
-    };
-    get suggestions(): FuseResult<string>[] | undefined;
-    get value(): string;
-    get input(): HTMLInputElement | null;
-}