Add tooltip and separator components, update form styling

.changeset/khaki-owls-camp.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': minor
+---
+
+Added tooltip and separator components

package.json

@@ -82,6 +82,10 @@
       "types": "./dist/components/select/index.d.ts",
       "svelte": "./dist/components/select/index.js"
     },
+    "./components/separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "svelte": "./dist/components/separator/index.js"
+    },
     "./components/switch": {
       "types": "./dist/components/switch/index.d.ts",
       "svelte": "./dist/components/switch/index.js"
@@ -90,6 +94,10 @@
       "types": "./dist/components/textarea/index.d.ts",
       "svelte": "./dist/components/textarea/index.js"
     },
+    "./components/tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "svelte": "./dist/components/tooltip/index.js"
+    },
     "./package.json": "./package.json",
     "./transition/flyAndScale": {
       "types": "./dist/transition/flyAndScale.d.ts",
@@ -113,11 +121,17 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "homepage": "https://github.com/jeannemas/svelte-ui",
   "license": "MIT",
   "name": "@jeanne-mas/svelte-ui",
   "peerDependencies": {
     "svelte": "^4.0.0"
   },
+  "repository": {
+    "directory": "https://github.com/jeannemas/svelte-ui",
+    "type": "git",
+    "url": "https://github.com/jeannemas/svelte-ui.git"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

src/lib/components/input/Input.svelte

@@ -13,7 +13,7 @@
          */
         value?: number;
         /**
-         * The type of the input.
+         * The variant of the input.
          */
         variant: 'number';
       }
@@ -23,7 +23,7 @@
          */
         value?: string;
         /**
-         * The type of the input.
+         * The variant of the input.
          */
         variant: 'text';
       };

src/lib/components/separator/Separator.svelte

@@ -0,0 +1,47 @@
+<script context="module" lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<SeparatorPrimitive.Props, keyof Attributes>;
+  export type Slots = ComponentSlots<SeparatorPrimitive.Root>;
+
+  export const defaultOrientation = 'horizontal' as const;
+  export const orientations = ['horizontal', 'vertical'] as const satisfies Props['orientation'][];
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let decorative: Props['decorative'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let orientation: Props['orientation'] = defaultOrientation;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SeparatorPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    'shrink-0 bg-border',
+    orientation === 'horizontal' ? 'my-4 h-[1px] w-full' : 'mx-4 h-full w-[1px]',
+    attributes.class,
+  )}"
+  decorative="{decorative}"
+  el="{el}"
+  orientation="{orientation}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</SeparatorPrimitive.Root>

src/lib/components/separator/index.ts

@@ -0,0 +1,9 @@
+export {
+  default,
+  defaultOrientation,
+  orientations,
+  type Attributes,
+  type Events,
+  type Props,
+  type Slots,
+} from './Separator.svelte';

src/lib/components/tooltip/Content.svelte

@@ -0,0 +1,97 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { flyAndScale } from '$lib/transition/flyAndScale.js';
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = Omit<
+    TooltipPrimitive.ContentProps<TTransition, TTransitionIn, TTransitionOut>,
+    keyof Attributes
+  >;
+  export type Slots<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = ComponentSlots<TooltipPrimitive.Content<TTransition, TTransitionIn, TTransitionOut>>;
+</script>
+
+<script
+  generics="
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition
+  "
+  lang="ts"
+>
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & TypedProps;
+  type $$Slots = TypedSlots;
+  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+
+  export let align: TypedProps['align'] = undefined;
+  export let alignOffset: TypedProps['alignOffset'] = undefined;
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let avoidCollisions: TypedProps['avoidCollisions'] = undefined;
+  export let collisionBoundary: TypedProps['collisionBoundary'] = undefined;
+  export let collisionPadding: TypedProps['collisionPadding'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let fitViewport: TypedProps['fitViewport'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = undefined;
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = undefined;
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let overlap: TypedProps['overlap'] = undefined;
+  export let sameWidth: TypedProps['sameWidth'] = undefined;
+  export let side: TypedProps['side'] = undefined;
+  export let sideOffset: TypedProps['sideOffset'] = 4;
+  export let strategy: TypedProps['strategy'] = undefined;
+  export let transition: TypedProps['transition'] = flyAndScale as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = {
+    y: 8,
+    duration: 150,
+  };
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Content
+  {...attributes}
+  align="{align}"
+  alignOffset="{alignOffset}"
+  asChild="{asChild}"
+  avoidCollisions="{avoidCollisions}"
+  class="{cn(
+    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+    attributes.class,
+  )}"
+  collisionBoundary="{collisionBoundary}"
+  collisionPadding="{collisionPadding}"
+  el="{el}"
+  fitViewport="{fitViewport}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  overlap="{overlap}"
+  sameWidth="{sameWidth}"
+  side="{side}"
+  sideOffset="{sideOffset}"
+  strategy="{strategy}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</TooltipPrimitive.Content>

src/lib/components/tooltip/Root.svelte

@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = Record<never, never>;
+  export type Events = Pick<TooltipPrimitive.Props, 'onOpenChange'>;
+  export type Props = Omit<TooltipPrimitive.Props, keyof Events>;
+  export type Slots = ComponentSlots<TooltipPrimitive.Root>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let closeDelay: Props['closeDelay'] = 0;
+  export let closeOnEscape: Props['closeOnEscape'] = undefined;
+  export let closeOnPointerDown: Props['closeOnPointerDown'] = undefined;
+  export let disableHoverableContent: Props['disableHoverableContent'] = undefined;
+  export let group: Props['group'] = undefined;
+  export let open: Props['open'] = undefined;
+  export let openDelay: Props['openDelay'] = 0;
+  export let portal: Props['portal'] = undefined;
+
+  // $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Root
+  closeDelay="{closeDelay}"
+  closeOnEscape="{closeOnEscape}"
+  closeOnPointerDown="{closeOnPointerDown}"
+  disableHoverableContent="{disableHoverableContent}"
+  group="{group}"
+  openDelay="{openDelay}"
+  portal="{portal}"
+  bind:open="{open}"
+  let:ids
+>
+  <slot ids="{ids}" />
+</TooltipPrimitive.Root>

src/lib/components/tooltip/Trigger.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['button'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<TooltipPrimitive.TriggerProps, keyof Attributes>;
+  export type Slots = ComponentSlots<TooltipPrimitive.Trigger>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Trigger {...attributes} asChild="{asChild}" el="{el}" let:builder>
+  <slot builder="{builder}" />
+</TooltipPrimitive.Trigger>

src/lib/components/tooltip/index.ts

@@ -0,0 +1,21 @@
+export {
+  default as Content,
+  type Attributes as ContentAttributes,
+  type Events as ContentEvents,
+  type Props as ContentProps,
+  type Slots as ContentSlots,
+} from './Content.svelte';
+export {
+  default as Root,
+  type Attributes as RootAttributes,
+  type Events as RootEvents,
+  type Props as RootProps,
+  type Slots as RootSlots,
+} from './Root.svelte';
+export {
+  default as Trigger,
+  type Attributes as TriggerAttributes,
+  type Events as TriggerEvents,
+  type Props as TriggerProps,
+  type Slots as TriggerSlots,
+} from './Trigger.svelte';

src/routes/+layout.svelte

@@ -11,13 +11,7 @@
 
 <script lang="ts">
   const title = derived(page, ($page) => {
-    const { id } = $page.route;
-
-    if (!id) {
-      return 'Home';
-    }
-
-    const str = id.replaceAll(/[^\w]/g, ' ').split(' ').filter(Boolean).join(' ');
+    const str = $page.route.id!.replaceAll(/[^\w]/g, ' ').split(' ').filter(Boolean).join(' ');
 
     return str.charAt(0).toUpperCase() + str.slice(1);
   });