Update Svelte UI package and add new label & popover components

.changeset/gold-socks-grow.md

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

package.json

@@ -1,21 +1,46 @@
 {
-  "name": "@jeanne-mas/svelte-ui",
-  "version": "0.6.0",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
-    "test": "npm run test:integration && npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "test:integration": "playwright test",
-    "test:unit": "vitest",
-    "prepare": "husky"
+  "author": {
+    "email": "[email protected]",
+    "name": "Jeanne Mas",
+    "url": "https://jeannemas.me"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.5.2",
+    "bits-ui": "^0.21.2",
+    "clsx": "^2.1.0",
+    "lucide-svelte": "^0.368.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwind-variants": "^0.2.1"
+  },
+  "description": "A collection of Svelte components and related utilities that I use in my projects.",
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "husky": "^9.0.11",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "publint": "^0.1.9",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.6",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
   },
   "exports": {
     "./components/button": {
@@ -38,6 +63,14 @@
       "types": "./dist/components/input/index.d.ts",
       "svelte": "./dist/components/input/index.js"
     },
+    "./components/label": {
+      "types": "./dist/components/label/index.d.ts",
+      "svelte": "./dist/components/label/index.js"
+    },
+    "./components/popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "svelte": "./dist/components/popover/index.js"
+    },
     "./package.json": "./package.json",
     "./transition/flyAndScale": {
       "types": "./dist/transition/flyAndScale.d.ts",
@@ -61,47 +94,28 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "license": "MIT",
+  "name": "@jeanne-mas/svelte-ui",
   "peerDependencies": {
     "svelte": "^4.0.0"
   },
-  "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/eslint": "^8.56.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "husky": "^9.0.11",
-    "postcss": "^8.4.32",
-    "postcss-load-config": "^5.0.2",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "publint": "^0.1.9",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tailwindcss": "^3.3.6",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "prepare": "husky"
   },
   "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "type": "module",
-  "dependencies": {
-    "@internationalized/date": "^3.5.2",
-    "bits-ui": "^0.21.2",
-    "clsx": "^2.1.0",
-    "lucide-svelte": "^0.368.0",
-    "tailwind-merge": "^2.2.2",
-    "tailwind-variants": "^0.2.1"
-  }
+  "types": "./dist/index.d.ts",
+  "version": "0.6.0"
 }

src/app.pcss

@@ -86,10 +86,6 @@
 [data-form] {
   @apply grid grid-cols-[auto_1fr] justify-items-stretch gap-2;
 
-  & [data-label] {
-    @apply text-right font-bold;
-  }
-
   & [data-control] {
     @apply rounded border border-border px-2 py-1;
   }

src/lib/components/calendar/Root.svelte

@@ -21,7 +21,7 @@
   >;
 </script>
 
-<script lang="ts" generics="TMultiple extends boolean = false">
+<script generics="TMultiple extends boolean = false" lang="ts">
   type $$Events = CalendarPrimitive.Events;
   type $$Props = Attributes & TypedEvents & TypedProps;
   type $$Slots = Slots<TMultiple>;

src/lib/components/collapsible/Content.svelte

@@ -23,12 +23,12 @@
 </script>
 
 <script
-  lang="ts"
   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;

src/lib/components/label/Label.svelte

@@ -0,0 +1,41 @@
+<script context="module" lang="ts">
+  import { Label as LabelPrimitive } 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['label'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<LabelPrimitive.Props, keyof Attributes>;
+  export type Slots = ComponentSlots<LabelPrimitive.Root>;
+</script>
+
+<script lang="ts">
+  type $$Events = LabelPrimitive.Events;
+  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> -->
+
+<LabelPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    'text-sm font-medium leading-none',
+    'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    attributes.class,
+  )}"
+  el="{el}"
+  let:builder
+  on:mousedown
+>
+  <slot builder="{builder}" />
+</LabelPrimitive.Root>

src/lib/components/label/index.ts

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

src/lib/components/popover/Close.svelte

@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+  import { Popover as PopoverPrimitive } 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<PopoverPrimitive.CloseProps, keyof Attributes>;
+  export type Slots = ComponentSlots<PopoverPrimitive.Close>;
+</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> -->
+
+<PopoverPrimitive.Close {...attributes} asChild="{asChild}" el="{el}" let:builder>
+  <slot builder="{builder}" />
+</PopoverPrimitive.Close>

src/lib/components/popover/Content.svelte

@@ -0,0 +1,93 @@
+<script context="module" lang="ts">
+  import { Popover as PopoverPrimitive } 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<
+    PopoverPrimitive.ContentProps<TTransition, TTransitionIn, TTransitionOut>,
+    keyof Attributes
+  >;
+  export type Slots<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = ComponentSlots<PopoverPrimitive.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 = Slots<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+
+  export let align: TypedProps['align'] = undefined;
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let alignOffset: TypedProps['alignOffset'] = 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'] = undefined;
+  export let strategy: TypedProps['strategy'] = undefined;
+  export let transition: TypedProps['transition'] = flyAndScale as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<PopoverPrimitive.Content
+  {...attributes}
+  align="{align}"
+  asChild="{asChild}"
+  alignOffset="{alignOffset}"
+  avoidCollisions="{avoidCollisions}"
+  class="{cn(
+    'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+    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}" />
+</PopoverPrimitive.Content>