@widgetic/design-system 0.3.68 → 0.3.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/README.md +126 -454
  2. package/dist/components/CopyableHeader.svelte +7 -11
  3. package/dist/components/EmptyState.svelte +1 -1
  4. package/dist/components/WScrollArea.svelte +4 -4
  5. package/dist/components/debug-grid/DebugGrid.svelte +1 -1
  6. package/dist/components/ic/browser/BrowserInputController.svelte +1 -1
  7. package/dist/components/index.d.ts +1 -1
  8. package/dist/components/index.js +1 -1
  9. package/dist/components/modals/ActionModal.svelte +2 -2
  10. package/dist/components/modals/BaseModal.svelte +2 -2
  11. package/dist/components/modals/NewItemDialog.svelte +3 -3
  12. package/dist/components/modals/RenameDialog.svelte +3 -3
  13. package/dist/components/navigation/Breadcrumbs.svelte +9 -9
  14. package/dist/components/pdf/PDFViewer.svelte +2 -2
  15. package/dist/components/search-input/SearchInput.svelte +1 -6
  16. package/dist/components/search-input/index.d.ts +3 -14
  17. package/dist/components/search-input/index.js +1 -2
  18. package/dist/components/search-input/index2.d.ts +14 -0
  19. package/dist/components/shad-editor/README.md +18 -0
  20. package/dist/components/shad-editor/custom/code-extended.svelte +1 -1
  21. package/dist/components/shad-editor/custom/image-extended-component.svelte +1 -1
  22. package/dist/components/shad-editor/editor.css +8 -4
  23. package/dist/components/shad-editor/icons/highlighter.svelte +1 -1
  24. package/dist/components/shad-editor/icons/image.svelte +1 -1
  25. package/dist/components/shad-editor/icons/link.svelte +1 -1
  26. package/dist/components/shad-editor/icons/quickcolor.svelte +3 -3
  27. package/dist/components/shad-editor/icons/table.svelte +4 -4
  28. package/dist/components/shad-editor/icons/text.svelte +6 -6
  29. package/dist/components/shad-editor/icons/textalign.svelte +5 -5
  30. package/dist/components/shad-editor/icons/textcolor.svelte +1 -1
  31. package/dist/components/shad-editor/onedark.css +3 -0
  32. package/dist/components/shad-editor/shad-editor.svelte +1 -1
  33. package/dist/components/toast/ToasterModal.svelte +7 -7
  34. package/dist/components/ui/badge/badge.svelte +1 -1
  35. package/dist/components/ui/badge/badge.svelte.d.ts +2 -2
  36. package/dist/components/ui/button/button.svelte +1 -1
  37. package/dist/components/ui/button/button.svelte.d.ts +2 -2
  38. package/dist/components/ui/calendar/calendar-day.svelte +4 -4
  39. package/dist/components/ui/card/card.svelte +1 -1
  40. package/dist/components/ui/checkbox/checkbox.svelte +1 -1
  41. package/dist/components/ui/command/command-dialog.svelte +1 -1
  42. package/dist/components/ui/command/command-input.svelte +1 -1
  43. package/dist/components/ui/command/command-item.svelte +1 -1
  44. package/dist/components/ui/command/command-link-item.svelte +1 -1
  45. package/dist/components/ui/dialog/dialog-content.svelte +1 -1
  46. package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +1 -1
  47. package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
  48. package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte +1 -1
  49. package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +1 -1
  50. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  51. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
  52. package/dist/components/ui/hover-card/hover-card-content.svelte +1 -1
  53. package/dist/components/ui/input/input.svelte +1 -1
  54. package/dist/components/ui/input-otp/input-otp.svelte +1 -1
  55. package/dist/components/ui/popover/popover-content.svelte +1 -1
  56. package/dist/components/ui/radio-group/radio-group-item.svelte +1 -1
  57. package/dist/components/ui/range-calendar/range-calendar-day.svelte +6 -6
  58. package/dist/components/ui/select/select-item.svelte +1 -1
  59. package/dist/components/ui/select/select-trigger.svelte +1 -1
  60. package/dist/components/ui/slider/slider.svelte +1 -1
  61. package/dist/components/ui/switch/switch.svelte +1 -1
  62. package/dist/components/ui/tabs/tabs-content.svelte +1 -1
  63. package/dist/components/ui/tabs/tabs-trigger.svelte +1 -1
  64. package/dist/components/ui/textarea/textarea.svelte +1 -1
  65. package/dist/components/ui/toggle/toggle.svelte +1 -1
  66. package/dist/components/ui/toggle/toggle.svelte.d.ts +2 -2
  67. package/dist/components/widget-system/Moveable.svelte +0 -1
  68. package/dist/styles/fonts.css +50 -39
  69. package/dist/styles/global.css +55 -36
  70. package/package.json +12 -11
  71. package/tailwind.config.ts +1 -6
package/dist/components/toast/ToasterModal.svelte CHANGED
@@ -101,25 +101,25 @@ export function showToast(type: string = 'success', title: string, options: any
101
101
  toastOptions={{
102
102
  style: "box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); !important;",
103
103
  classes: {
104
- toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
105
- "!min-w-[334px] !max-w-[450px] " +
104
+ toast: toastMainClass + " widgetic-colors widgetic-radius bg-white! rounded-small! border! border-[hsl(var(--forest-green))]! " +
105
+ "min-w-[334px]! max-w-[450px]! " +
106
106
  // "fixed top-auto bottom-[20px] right-[20px] " +
107
- "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " +
107
+ "flex! items-center! gap-[24px]! p-[16px]! px-[24px]! " +
108
108
  // Icon Styling
109
- "[&>[data-icon]]:!w-[24px] [&>[data-icon]]:!h-[24px] [&>[data-icon]]:!m-0 " +
110
- "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
109
+ "*:data-icon:w-[24px]! *:data-icon:h-[24px]! *:data-icon:m-0! " +
110
+ "[&>[data-icon]>svg]:w-full! [&>[data-icon]>svg]:h-full! " +
111
111
  // Content Styling
112
112
  "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
113
113
  // Title Styling
114
114
  title: toastMainClass + "-title body-medium",
115
115
  // Description Styling
116
- description: toastMainClass + "-description caption !text-[hsl(var(--grey5))]",
116
+ description: toastMainClass + "-description caption text-[hsl(var(--grey5))]!",
117
117
  // Action Button Styling
118
118
  actionButton: "",
119
119
  // Cancel Button Styling
120
120
  cancelButton: "",
121
121
  // Close Button Styling
122
- closeButton: toastMainClass + '-close-button w-[16px] h-[16px] absolute -translate-x-1/2 -translate-y-1/2 top-[1px] left-[1px] z-10 !bg-[hsl(var(--grey7))] border !border-[hsl(var(--grey5))] !text-white'
122
+ closeButton: toastMainClass + '-close-button w-[16px] h-[16px] absolute -translate-x-1/2 -translate-y-1/2 top-[1px] left-[1px] z-10 bg-[hsl(var(--grey7))]! border border-[hsl(var(--grey5))]! text-white!'
123
123
  }
124
124
  }}
125
125
  expand={false}
package/dist/components/ui/badge/badge.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { type VariantProps, tv } from "tailwind-variants";
3
3
 
4
4
  export const badgeVariants = tv({
5
- base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
5
+ base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
6
6
  variants: {
7
7
  variant: {
8
8
  default:
package/dist/components/ui/badge/badge.svelte.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
6
6
  destructive: string;
7
7
  outline: string;
8
8
  };
9
- }, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
9
+ }, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
10
10
  variant: {
11
11
  default: string;
12
12
  secondary: string;
@@ -34,7 +34,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
34
34
  destructive: string;
35
35
  outline: string;
36
36
  };
37
- }, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
37
+ }, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
38
38
  variant: {
39
39
  default: string;
40
40
  secondary: string;
package/dist/components/ui/button/button.svelte CHANGED
@@ -4,7 +4,7 @@
4
4
  import { type VariantProps, tv } from "tailwind-variants";
5
5
 
6
6
  export const buttonVariants = tv({
7
- base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
7
+ base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8
8
  variants: {
9
9
  variant: {
10
10
  default: "bg-primary text-primary-foreground hover:bg-primary/90",
package/dist/components/ui/button/button.svelte.d.ts CHANGED
@@ -16,7 +16,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
16
16
  lg: string;
17
17
  icon: string;
18
18
  };
19
- }, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
19
+ }, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
20
20
  variant: {
21
21
  default: string;
22
22
  destructive: string;
@@ -76,7 +76,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
76
76
  lg: string;
77
77
  icon: string;
78
78
  };
79
- }, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
79
+ }, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
80
80
  variant: {
81
81
  default: string;
82
82
  destructive: string;
package/dist/components/ui/calendar/calendar-day.svelte CHANGED
@@ -17,13 +17,13 @@
17
17
  "size-9 p-0 font-normal",
18
18
  "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
19
19
  // Selected
20
- "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
20
+ "data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground data-selected:opacity-100",
21
21
  // Disabled
22
- "data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
22
+ "data-disabled:text-muted-foreground data-disabled:opacity-50",
23
23
  // Unavailable
24
- "data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
24
+ "data-unavailable:text-destructive-foreground data-unavailable:line-through",
25
25
  // Outside months
26
- "data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
26
+ "data-outside-month:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-outside-month:pointer-events-none data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
27
27
  className
28
28
  )}
29
29
  {...restProps}
package/dist/components/ui/card/card.svelte CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  <div
15
15
  bind:this={ref}
16
- class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
16
+ class={cn("bg-card text-card-foreground rounded-lg border shadow-2xs", className)}
17
17
  {...restProps}
18
18
  >
19
19
  {@render children?.()}
package/dist/components/ui/checkbox/checkbox.svelte CHANGED
@@ -16,7 +16,7 @@
16
16
  <CheckboxPrimitive.Root
17
17
  bind:ref
18
18
  class={cn(
19
- "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
19
+ "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
20
20
  className
21
21
  )}
22
22
  bind:checked
package/dist/components/ui/command/command-dialog.svelte CHANGED
@@ -25,7 +25,7 @@
25
25
  <Dialog.Root bind:open {...restProps}>
26
26
  <Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
27
27
  <Command
28
- class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
28
+ class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 **:data-command-group:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
29
29
  {...restProps}
30
30
  bind:value
31
31
  bind:ref
package/dist/components/ui/command/command-input.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  <Search class="mr-2 size-4 shrink-0 opacity-50" />
16
16
  <CommandPrimitive.Input
17
17
  class={cn(
18
- "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
18
+ "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
19
19
  className
20
20
  )}
21
21
  bind:ref
package/dist/components/ui/command/command-item.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  <CommandPrimitive.Item
13
13
  class={cn(
14
- "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
14
+ "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
15
15
  className
16
16
  )}
17
17
  bind:ref
package/dist/components/ui/command/command-link-item.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  <CommandPrimitive.LinkItem
13
13
  class={cn(
14
- "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
14
+ "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
15
15
  className
16
16
  )}
17
17
  bind:ref
package/dist/components/ui/dialog/dialog-content.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  >
30
30
  {@render children?.()}
31
31
  <DialogPrimitive.Close
32
- class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
32
+ class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
33
33
  >
34
34
  <X class="size-4" />
35
35
  <span class="sr-only">Close</span>
package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte CHANGED
@@ -22,7 +22,7 @@
22
22
  bind:checked
23
23
  bind:indeterminate
24
24
  class={cn(
25
- "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
25
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
26
26
  className
27
27
  )}
28
28
  {...restProps}
package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte CHANGED
@@ -18,7 +18,7 @@
18
18
  bind:ref
19
19
  {sideOffset}
20
20
  class={cn(
21
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
21
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
22
22
  className
23
23
  )}
24
24
  {...restProps}
package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  <DropdownMenuPrimitive.Item
16
16
  bind:ref
17
17
  class={cn(
18
- "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
18
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
19
19
  inset && "pl-8",
20
20
  className
21
21
  )}
package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  <DropdownMenuPrimitive.RadioItem
15
15
  bind:ref
16
16
  class={cn(
17
- "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
17
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
18
18
  className
19
19
  )}
20
20
  {...restProps}
package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte CHANGED
@@ -12,7 +12,7 @@
12
12
  <DropdownMenuPrimitive.SubContent
13
13
  bind:ref
14
14
  class={cn(
15
- "bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
15
+ "bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
16
16
  className
17
17
  )}
18
18
  {...restProps}
package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  <DropdownMenuPrimitive.SubTrigger
18
18
  bind:ref
19
19
  class={cn(
20
- "data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
20
+ "data-highlighted:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
21
21
  inset && "pl-8",
22
22
  className
23
23
  )}
package/dist/components/ui/hover-card/hover-card-content.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  {align}
21
21
  {sideOffset}
22
22
  class={cn(
23
- "bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
23
+ "bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
24
24
  className
25
25
  )}
26
26
  {...restProps}
package/dist/components/ui/input/input.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  <input
15
15
  bind:this={ref}
16
16
  class={cn(
17
- "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
+ "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18
18
  className
19
19
  )}
20
20
  bind:value
package/dist/components/ui/input-otp/input-otp.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  bind:ref
16
16
  bind:value
17
17
  class={cn(
18
- "flex items-center gap-2 has-[:disabled]:opacity-50 [&_input]:disabled:cursor-not-allowed",
18
+ "flex items-center gap-2 has-disabled:opacity-50 disabled:[&_input]:cursor-not-allowed",
19
19
  className
20
20
  )}
21
21
  {...restProps}
package/dist/components/ui/popover/popover-content.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  {sideOffset}
21
21
  {align}
22
22
  class={cn(
23
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
23
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
24
24
  className
25
25
  )}
26
26
  {...restProps}
package/dist/components/ui/radio-group/radio-group-item.svelte CHANGED
@@ -13,7 +13,7 @@
13
13
  <RadioGroupPrimitive.Item
14
14
  bind:ref
15
15
  class={cn(
16
- "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
16
+ "border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
17
  className
18
18
  )}
19
19
  {...restProps}
package/dist/components/ui/range-calendar/range-calendar-day.svelte CHANGED
@@ -16,18 +16,18 @@
16
16
  bind:ref
17
17
  class={cn(
18
18
  buttonVariants({ variant: "ghost" }),
19
- "size-9 p-0 font-normal data-[selected]:opacity-100",
19
+ "size-9 p-0 font-normal data-selected:opacity-100",
20
20
  "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
21
21
  // Selection Start
22
- "data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
22
+ "data-selection-start:bg-primary data-selection-start:text-primary-foreground data-selection-start:hover:bg-primary data-selection-start:hover:text-primary-foreground data-selection-start:focus:bg-primary data-selection-start:focus:text-primary-foreground",
23
23
  // Selection End
24
- "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
24
+ "data-selection-end:bg-primary data-selection-end:text-primary-foreground data-selection-end:hover:bg-primary data-selection-end:hover:text-primary-foreground data-selection-end:focus:bg-primary data-selection-end:focus:text-primary-foreground",
25
25
  // Outside months
26
- "data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
26
+ "data-outside-month:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-outside-month:pointer-events-none data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
27
27
  // Disabled
28
- "data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
28
+ "data-disabled:text-muted-foreground data-disabled:opacity-50",
29
29
  // Unavailable
30
- "data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
30
+ "data-unavailable:text-destructive-foreground data-unavailable:line-through",
31
31
  className
32
32
  )}
33
33
  {...restProps}
package/dist/components/ui/select/select-item.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  bind:ref
18
18
  {value}
19
19
  class={cn(
20
- "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
20
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
21
21
  className
22
22
  )}
23
23
  {...restProps}
package/dist/components/ui/select/select-trigger.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  <SelectPrimitive.Trigger
15
15
  bind:ref
16
16
  class={cn(
17
- "border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
17
+ "border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
18
18
  className
19
19
  )}
20
20
  {...restProps}
package/dist/components/ui/slider/slider.svelte CHANGED
@@ -27,7 +27,7 @@ get along, so we shut typescript up by casting `value` to `never`.
27
27
  {#each thumbs as thumb}
28
28
  <SliderPrimitive.Thumb
29
29
  index={thumb}
30
- class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
30
+ class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
31
31
  />
32
32
  {/each}
33
33
  {/snippet}
package/dist/components/ui/switch/switch.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  bind:ref
15
15
  bind:checked
16
16
  class={cn(
17
- "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
+ "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18
18
  className
19
19
  )}
20
20
  {...restProps}
package/dist/components/ui/tabs/tabs-content.svelte CHANGED
@@ -12,7 +12,7 @@
12
12
  <TabsPrimitive.Content
13
13
  bind:ref
14
14
  class={cn(
15
- "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
15
+ "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2",
16
16
  className
17
17
  )}
18
18
  {...restProps}
package/dist/components/ui/tabs/tabs-trigger.svelte CHANGED
@@ -12,7 +12,7 @@
12
12
  <TabsPrimitive.Trigger
13
13
  bind:ref
14
14
  class={cn(
15
- "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
15
+ "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs",
16
16
  className
17
17
  )}
18
18
  {...restProps}
package/dist/components/ui/textarea/textarea.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  <textarea
15
15
  bind:this={ref}
16
16
  class={cn(
17
- "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
+ "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18
18
  className
19
19
  )}
20
20
  bind:value
package/dist/components/ui/toggle/toggle.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { type VariantProps, tv } from "tailwind-variants";
3
3
 
4
4
  export const toggleVariants = tv({
5
- base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
5
+ base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
6
6
  variants: {
7
7
  variant: {
8
8
  default: "bg-transparent",
package/dist/components/ui/toggle/toggle.svelte.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
9
9
  sm: string;
10
10
  lg: string;
11
11
  };
12
- }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
12
+ }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
13
13
  variant: {
14
14
  default: string;
15
15
  outline: string;
@@ -49,7 +49,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
49
49
  sm: string;
50
50
  lg: string;
51
51
  };
52
- }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
52
+ }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
53
53
  variant: {
54
54
  default: string;
55
55
  outline: string;
package/dist/components/widget-system/Moveable.svelte CHANGED
@@ -639,7 +639,6 @@
639
639
  border-radius: 4px;
640
640
  font-size: 12px;
641
641
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
642
- width: -moz-fit-content;
643
642
  width: fit-content;
644
643
  z-index: 200; /* Highest z-index for info tooltip */
645
644
  }
package/dist/styles/fonts.css CHANGED
@@ -1,3 +1,6 @@
1
+ /* Tailwind config */
2
+ /* @config "../../../tailwind.config.ts"; */
3
+
1
4
  /*** GLOBAL STYLE FONTS ***/
2
5
 
3
6
  /* BL MELODY FAMILY: rules and classes */
@@ -28,47 +31,48 @@
28
31
  font-display: swap;
29
32
  }
30
33
 
31
- .h1 {
34
+ /* Convert classes to utilities */
35
+ @utility h1 {
32
36
  font-family: 'BL Melody';
33
37
  font-weight: 500;
34
38
  font-size: 144px;
35
39
  line-height: 0.85;
36
- }
40
+ }
37
41
 
38
- .h2 {
42
+ @utility h2 {
39
43
  font-family: 'BL Melody';
40
44
  font-weight: 500;
41
45
  font-size: 72px;
42
46
  line-height: 0.96;
43
- }
47
+ }
44
48
 
45
- .h3 {
49
+ @utility h3 {
46
50
  font-family: 'BL Melody';
47
51
  font-weight: 700;
48
52
  font-size: 56px;
49
53
  line-height: 1;
50
- }
54
+ }
51
55
 
52
- .h4 {
56
+ @utility h4 {
53
57
  font-family: 'BL Melody';
54
58
  font-weight: 600;
55
59
  font-size: 32px;
56
60
  line-height: 1.1;
57
- }
61
+ }
58
62
 
59
- .h5 {
63
+ @utility h5 {
60
64
  font-family: 'BL Melody';
61
65
  font-weight: 500;
62
66
  font-size: 24px;
63
67
  line-height: 1.2;
64
- }
68
+ }
65
69
 
66
- .h6 {
70
+ @utility h6 {
67
71
  font-family: 'BL Melody';
68
72
  font-weight: 600;
69
73
  font-size: 14px;
70
74
  line-height: 1;
71
- }
75
+ }
72
76
 
73
77
 
74
78
 
@@ -118,55 +122,62 @@
118
122
  font-display: swap;
119
123
  }
120
124
 
121
- .subtitle1 {
125
+ @utility subtitle1 {
122
126
  font-family: 'Riegla Regular';
123
127
  font-size: 32px;
124
128
  line-height: 1.2;
125
- }
129
+ }
126
130
 
127
- .subtitle2 {
131
+ @utility subtitle2 {
128
132
  font-family: 'Riegla Regular';
129
133
  font-size: 24px;
130
134
  line-height: 1.3;
131
- }
135
+ }
132
136
 
133
- .body-medium {
134
- font-family: 'Riegla Medium' !important;
135
- font-size: 18px !important;
136
- font-weight: 400 !important;
137
- line-height: 1.4 !important;
138
- }
137
+ @utility body-medium {
138
+ font-family: 'Riegla Medium';
139
+ font-size: 18px;
140
+ font-weight: 400;
141
+ line-height: 1.4;
142
+ }
139
143
 
140
- .body {
141
- font-family: 'Riegla Regular' !important;
142
- font-size: 18px !important;
143
- line-height: 1.4 !important;
144
- }
144
+ @utility body {
145
+ font-family: 'Riegla Regular';
146
+ font-size: 18px;
147
+ line-height: 1.4;
148
+ }
145
149
 
146
- .subtext {
147
- font-family: 'Riegla Regular' !important;
148
- font-size: 16px !important;
149
- line-height: 1.4 !important;
150
- }
150
+ @utility body-bold {
151
+ font-family: 'Riegla Regular';
152
+ font-size: 18px;
153
+ line-height: 1.4;
154
+ font-weight: 700;
155
+ }
151
156
 
152
- .caption {
157
+ @utility subtext {
158
+ font-family: 'Riegla Regular';
159
+ font-size: 16px;
160
+ line-height: 1.4;
161
+ }
162
+
163
+ @utility caption {
153
164
  font-family: 'Riegla Medium';
154
- font-weight: 400 !important;
165
+ font-weight: 400;
155
166
  font-size: 14px;
156
167
  line-height: 1.2;
157
- }
168
+ }
158
169
 
159
- .link {
170
+ @utility link {
160
171
  font-family: 'Riegla Medium';
161
172
  font-size: 14px;
162
173
  line-height: 1;
163
174
  text-decoration: underline;
164
- }
175
+ }
165
176
 
166
- .tag {
177
+ @utility tag {
167
178
  font-family: 'Riegla Medium';
168
179
  font-size: 11px;
169
180
  line-height: 16px;
170
181
  text-transform: uppercase;
171
- }
182
+ }
172
183