@tanglemedia/svelte-starter-auth-shadcn 0.0.2 → 0.1.0

package/dist/lib/components/ui/reset-password/reset-password-form.svelte

@@ -0,0 +1,91 @@
+<!-- title = "Reset Password", 
+description = "Enter your new password below to reset your password", -->
+
+<script lang="ts">
+  import { Card } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+  import SuperDebug, {
+    defaults,
+    superForm,
+    type Infer,
+    type SuperForm,
+    type SuperValidated,
+  } from "sveltekit-superforms";
+  import { zod4 } from "sveltekit-superforms/adapters";
+
+  import ResetPasswordProvider from "./reset-password-provider.svelte";
+  import ResetPasswordContainer from "./reset-password-container.svelte";
+  import ResetPasswordHeader from "./reset-password-header.svelte";
+  import ResetPasswordSubmit from "./reset-password-submit.svelte";
+  import ResetPasswordPasswordInput from "./reset-password-password-input.svelte";
+  import { resetPasswordSchema, type ResetPasswordSchema } from "./reset-password.schema.js";
+
+  import { ServerError } from "@tanglemedia/svelte-starter-form-shadcn";
+  // import { Field } from "@tanglemedia/svelte-starter-form-shadcn";
+
+  interface Props {
+    superform?: SuperForm<Infer<ResetPasswordSchema>> | null;
+    card?: boolean;
+    // cardClass?: string;
+    title?: string;
+    description?: string;
+    // forgotPassword?: boolean;
+    login?: boolean;
+    loginLink?: string;
+    lead?: Snippet;
+    tail?: Snippet;
+    children?: Snippet;
+    form?: SuperValidated<Infer<ResetPasswordSchema>>;
+    action?: string;
+
+    debug?: boolean;
+  }
+
+  let {
+    debug = false,
+    form,
+    superform: superforms = $bindable(null),
+    card = true,
+    title = "Reset Password",
+    description = "Enter your new password below to reset your password",
+    // forgotPassword = true,
+    login = true,
+    loginLink = "/login",
+    lead,
+    tail,
+    action = "?/register",
+  }: Props = $props();
+
+  superforms = superforms || superForm(form || defaults(zod4(resetPasswordSchema)));
+
+  const { errors, message } = superforms;
+</script>
+
+<ResetPasswordProvider {superforms} {action}>
+  <ResetPasswordContainer {card}>
+    <ResetPasswordHeader text={title} desc={description} />
+    <Card.Content>
+      {@render lead?.()}
+      <ServerError class="mb-4" />
+      <ResetPasswordPasswordInput name={"password"} label={"New Password"} />
+      <ResetPasswordPasswordInput name={"confirm_password"} label={"Confirm Password"} />
+      <ResetPasswordSubmit />
+      {#if login}
+        <div class="mt-4 text-center text-sm">
+          Remembered your password?
+          <a href={loginLink} class="underline"> Sign in </a>
+        </div>
+      {/if}
+      {@render tail?.()}
+
+      {#if debug}
+        <div class="mb-6">
+          <h4>Errors</h4>
+          <SuperDebug data={errors} />
+        </div>
+        <h4>Message</h4>
+        <SuperDebug data={$message} />
+      {/if}
+    </Card.Content>
+  </ResetPasswordContainer>
+</ResetPasswordProvider>

package/dist/lib/components/ui/reset-password/reset-password-form.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import { type Infer, type SuperForm, type SuperValidated } from "sveltekit-superforms";
+import { type ResetPasswordSchema } from "./reset-password.schema.js";
+interface Props {
+    superform?: SuperForm<Infer<ResetPasswordSchema>> | null;
+    card?: boolean;
+    title?: string;
+    description?: string;
+    login?: boolean;
+    loginLink?: string;
+    lead?: Snippet;
+    tail?: Snippet;
+    children?: Snippet;
+    form?: SuperValidated<Infer<ResetPasswordSchema>>;
+    action?: string;
+    debug?: boolean;
+}
+declare const ResetPasswordForm: import("svelte").Component<Props, {}, "superform">;
+type ResetPasswordForm = ReturnType<typeof ResetPasswordForm>;
+export default ResetPasswordForm;

package/dist/lib/components/ui/reset-password/reset-password-header.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Card } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type LoginHeaderAttr = {
+    text?: string;
+    desc?: string;
+  };
+
+  type LoginHeaderProps = LoginHeaderAttr & {
+    title?: Snippet<[LoginHeaderAttr]>;
+    description?: Snippet<[LoginHeaderAttr]>;
+    children?: Snippet<[LoginHeaderAttr]>;
+  };
+
+  let { title, children, description, ...restProps }: LoginHeaderProps = $props();
+</script>
+
+<Card.Header>
+  <Card.Title class="text-2xl">
+    {#if title}
+      {@render title(restProps)}
+    {:else if children}
+      {@render children?.(restProps)}
+    {:else}
+      {restProps.text}
+    {/if}
+  </Card.Title>
+  {#if description}
+    <Card.Description>{@render description(restProps)}</Card.Description>
+  {:else if restProps.desc}
+    <Card.Description>{restProps.desc}</Card.Description>
+  {/if}
+</Card.Header>

package/dist/lib/components/ui/reset-password/reset-password-header.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type LoginHeaderAttr = {
+    text?: string;
+    desc?: string;
+};
+type LoginHeaderProps = LoginHeaderAttr & {
+    title?: Snippet<[LoginHeaderAttr]>;
+    description?: Snippet<[LoginHeaderAttr]>;
+    children?: Snippet<[LoginHeaderAttr]>;
+};
+declare const ResetPasswordHeader: import("svelte").Component<LoginHeaderProps, {}, "">;
+type ResetPasswordHeader = ReturnType<typeof ResetPasswordHeader>;
+export default ResetPasswordHeader;

package/dist/lib/components/ui/reset-password/reset-password-password-input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+
+  type T = Record<string, unknown>;
+  type U = _FormPathLeaves<T, any>;
+</script>
+
+<script
+  lang="ts"
+  generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>"
+>
+  import {
+    Field,
+    type PasswordFieldProps,
+  } from '@tanglemedia/svelte-starter-form-shadcn';
+
+  type LoginPasswordInputProps = PasswordFieldProps<T, U>;
+  const { name = 'password' as U, ...rest }: LoginPasswordInputProps = $props();
+</script>
+
+<Field.Password {name} {...rest}></Field.Password>

package/dist/lib/components/ui/reset-password/reset-password-password-input.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type FormPathLeaves as _FormPathLeaves } from 'sveltekit-superforms';
+import { type PasswordFieldProps } from '@tanglemedia/svelte-starter-form-shadcn';
+declare function $$render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(): {
+    props: PasswordFieldProps<T, U>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ResetPasswordPasswordInput: $$IsomorphicComponent;
+type ResetPasswordPasswordInput<T extends Record<string, unknown>, U extends _FormPathLeaves<T, any>> = InstanceType<typeof ResetPasswordPasswordInput<T, U>>;
+export default ResetPasswordPasswordInput;

package/dist/lib/components/ui/reset-password/reset-password-provider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  type T = Record<string, unknown>;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import {
+    Form,
+    type FormProviderProps,
+  } from "@tanglemedia/svelte-starter-form-shadcn";
+  let rest: FormProviderProps<T> = $props();
+</script>
+
+<Form.Provider {...rest} />

package/dist/lib/components/ui/reset-password/reset-password-provider.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type FormProviderProps } from "@tanglemedia/svelte-starter-form-shadcn";
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: FormProviderProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ResetPasswordProvider: $$IsomorphicComponent;
+type ResetPasswordProvider<T extends Record<string, unknown>> = InstanceType<typeof ResetPasswordProvider<T>>;
+export default ResetPasswordProvider;

package/dist/lib/components/ui/reset-password/reset-password-submit.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Form } from "@tanglemedia/svelte-starter-form-shadcn";
+  import type { Snippet } from "svelte";
+
+  type LoginSubmitProps = {
+    children?: Snippet;
+  };
+  const { children }: LoginSubmitProps = $props();
+</script>
+
+<Form.Submit class="w-full">
+  {#if children}
+    {@render children?.()}
+  {:else}
+    Reset
+  {/if}
+</Form.Submit>

package/dist/lib/components/ui/reset-password/reset-password-submit.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type LoginSubmitProps = {
+    children?: Snippet;
+};
+declare const ResetPasswordSubmit: import("svelte").Component<LoginSubmitProps, {}, "">;
+type ResetPasswordSubmit = ReturnType<typeof ResetPasswordSubmit>;
+export default ResetPasswordSubmit;

package/dist/lib/components/ui/reset-password/reset-password.schema.d.ts

@@ -0,0 +1,6 @@
+import { z } from "zod";
+export declare const resetPasswordSchema: z.ZodObject<{
+    password: z.ZodString;
+    confirm_password: z.ZodString;
+}, z.core.$strip>;
+export type ResetPasswordSchema = typeof resetPasswordSchema;

package/dist/lib/components/ui/reset-password/reset-password.schema.js

@@ -0,0 +1,9 @@
+import { z } from "zod";
+export const resetPasswordSchema = z.object({
+    password: z.string().min(1, { error: "Password is required" }),
+    confirm_password: z
+        .string()
+        .min(1, { error: "Confirm password is required" })
+}).refine((schema) => {
+    return schema.password === schema.confirm_password;
+}, "Passwords do not match");

package/dist/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './is-mobile.svelte';

package/dist/lib/hooks/index.js

@@ -0,0 +1 @@
+export * from './is-mobile.svelte';

package/dist/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks/index.ts';
+export * from './components/ui/index.ts';

package/dist/lib/index.js

@@ -0,0 +1,3 @@
+// export * from './utils.ts';
+export * from "./hooks/index.js";
+export * from "./components/ui/index.js";

package/dist/lib/utils.d.ts

@@ -1,2 +1,12 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tanglemedia/svelte-starter-auth-shadcn",
-  "version": "0.0.2",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "version": "0.1.0",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "description": "Auth features and components for use in svelte websites",
   "type": "module",
   "module": "./dist/index.d.ts",
@@ -16,80 +16,51 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./Login-Form": {
-      "default": "./src/lib/components/ui/login-form/index.ts",
-      "types": "./src/lib/components/ui/login-form/index.ts",
-      "svelte": "./src/lib/components/ui/login-form/index.ts",
-      "import": "./src/lib/components/ui/login-form/index.ts"
-    },
-    "./Register-Form": {
-      "default": "./src/lib/components/ui/register-form/index.ts",
-      "types": "./src/lib/components/ui/register-form/index.ts",
-      "svelte": "./src/lib/components/ui/register-form/index.ts",
-      "import": "./src/lib/components/ui/register-form/index.ts"
-    },
-    "./Reset-Password-Form": {
-      "default": "./src/lib/components/ui/reset-password/index.ts",
-      "types": "./src/lib/components/ui/reset-password/index.ts",
-      "svelte": "./src/lib/components/ui/reset-password/index.ts",
-      "import": "./src/lib/components/ui/reset-password/index.ts"
-    },
-    "./Forgot-Password-Form": {
-      "default": "./src/lib/components/ui/forgot-password/index.ts",
-      "types": "./src/lib/components/ui/forgot-password/index.ts",
-      "svelte": "./src/lib/components/ui/forgot-password/index.ts",
-      "import": "./src/lib/components/ui/forgot-password/index.ts"
-    },
-    "./Auth-Layout": {
-      "default": "./src/lib/components/ui/auth-layout/index.ts",
-      "types": "./src/lib/components/ui/auth-layout/index.ts",
-      "svelte": "./src/lib/components/ui/auth-layout/index.ts",
-      "import": "./src/lib/components/ui/auth-layout/index.ts"
-    },
-    "./hooks": {
-      "default": "./src/lib/hooks"
-    },
-    "./utils": {
-      "default": "./src/lib/utils"
+      "svelte": "./dist/index.js"
     }
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/package": "^2.3.10",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.7",
-    "@vitest/coverage-v8": "^3.0.8",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
-    "postcss": "^8.5.3",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "autoprefixer": "^10.4.20",
-    "bits-ui": "^1.3.19",
+    "@lucide/svelte": "^0.561.0",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "bits-ui": "^2.14.3",
     "clsx": "^2.1.1",
-    "globals": "^15.14.0",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "tailwind-merge": "^3.2.0",
-    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0",
+    "globals": "^16.4.0",
+    "jsdom": "^27.0.0",
+    "msw": "^2.11.3",
+    "postcss": "^8.5.6",
+    "svelte": "^5.46.1",
+    "svelte-check": "^4.3.5",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
     "@internal/eslint-config": "0.0.0",
-    "@tanglemedia/svelte-starter-core": "2.0.0",
-    "@tanglemedia/svelte-starter-ui-shadcn": "0.0.1"
+    "@tanglemedia/svelte-starter-core": "3.0.0",
+    "@tanglemedia/svelte-starter-form-shadcn": "0.1.0",
+    "@tanglemedia/svelte-starter-ui-shadcn": "0.1.0"
   },
-  "dependencies": {},
   "peerDependencies": {
     "@sveltejs/kit": ">=2 <3",
-    "svelte": "^4.0.0 || >=5.0.0"
+    "svelte": ">=5.0.0"
+  },
+  "dependencies": {
+    "formsnap": "^2.0.1",
+    "svelte-toolbelt": "^0.10.6",
+    "sveltekit-superforms": "^2.29.1",
+    "zod": "^4.2.1"
   },
   "scripts": {
     "build": "svelte-package --input ./src --output ./dist",

package/src/app.css

@@ -0,0 +1,174 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@source "../node_modules/@tanglemedia/svelte-starter-form-shadcn/dist/**/*.{html,js,svelte,ts}";
+@source "src/**/*.{html,js,svelte,ts}";
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+ 
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.129 0.042 264.695);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.129 0.042 264.695);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.129 0.042 264.695);
+ --primary: oklch(0.208 0.042 265.755);
+ --primary-foreground: oklch(0.984 0.003 247.858);
+ --secondary: oklch(0.968 0.007 247.896);
+ --secondary-foreground: oklch(0.208 0.042 265.755);
+ --muted: oklch(0.968 0.007 247.896);
+ --muted-foreground: oklch(0.554 0.046 257.417);
+ --accent: oklch(0.968 0.007 247.896);
+ --accent-foreground: oklch(0.208 0.042 265.755);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.929 0.013 255.508);
+ --input: oklch(0.929 0.013 255.508);
+ --ring: oklch(0.704 0.04 256.788);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.984 0.003 247.858);
+ --sidebar-foreground: oklch(0.129 0.042 264.695);
+ --sidebar-primary: oklch(0.208 0.042 265.755);
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-accent: oklch(0.968 0.007 247.896);
+ --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+ --sidebar-border: oklch(0.929 0.013 255.508);
+ --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+ 
+.dark {
+ --background: oklch(0.129 0.042 264.695);
+ --foreground: oklch(0.984 0.003 247.858);
+ --card: oklch(0.208 0.042 265.755);
+ --card-foreground: oklch(0.984 0.003 247.858);
+ --popover: oklch(0.208 0.042 265.755);
+ --popover-foreground: oklch(0.984 0.003 247.858);
+ --primary: oklch(0.929 0.013 255.508);
+ --primary-foreground: oklch(0.208 0.042 265.755);
+ --secondary: oklch(0.279 0.041 260.031);
+ --secondary-foreground: oklch(0.984 0.003 247.858);
+ --muted: oklch(0.279 0.041 260.031);
+ --muted-foreground: oklch(0.704 0.04 256.788);
+ --accent: oklch(0.279 0.041 260.031);
+ --accent-foreground: oklch(0.984 0.003 247.858);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.551 0.027 264.364);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.208 0.042 265.755);
+ --sidebar-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-accent: oklch(0.279 0.041 260.031);
+ --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+ 
+  to {
+    height: var(--bits-accordion-content-height);
+  }
+}
+ 
+@keyframes accordion-up {
+  from {
+    height: var(--bits-accordion-content-height);
+  }
+ 
+  to {
+    height: 0;
+  }
+}
+ 
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+ 
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

package/src/app.html

@@ -1,4 +1,3 @@
-// src/app.html
 <!doctype html>
 <html lang="en">
   <head>

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/index.ts';