orphos 0.53.5 → 0.54.0

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.
package/colors.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import "@radix-ui/colors/gray.css";
2
+ @import "@radix-ui/colors/gray-dark.css";
1
3
  @import "@radix-ui/colors/tomato.css";
2
4
  @import "@radix-ui/colors/tomato-dark.css";
3
5
  @import "@radix-ui/colors/red.css";
@@ -10,94 +12,51 @@
10
12
  @import "@radix-ui/colors/blue-dark.css";
11
13
 
12
14
  :root,
13
- .light,
14
- .light-theme {
15
- --color-background: #fbfbfb;
16
-
17
- --gray-1: #f7f7f7;
18
- --gray-2: #f0f0f0;
19
- --gray-3: #e6e6e6;
20
- --gray-4: #dddddd;
21
- --gray-5: #d2d2d2;
22
- --gray-6: #c9c9c9;
23
- --gray-7: #bebebe;
24
- --gray-8: #aaaaaa;
25
- --gray-9: #7c7c7c;
26
- --gray-10: #727272;
27
- --gray-11: #606060;
28
- --gray-12: #202020;
29
- }
30
-
31
- @supports (color: color(display-p3 1 1 1)) {
32
- @media (color-gamut: p3) {
33
- :root,
34
- .light,
35
- .light-theme {
36
- --color-background: oklch(98.73% 0 139.47);
37
-
38
- --gray-1: oklch(97.7% 0 none);
39
- --gray-2: oklch(95.4% 0 none);
40
- --gray-3: oklch(92.4% 0 none);
41
- --gray-4: oklch(89.8% 0 none);
42
- --gray-5: oklch(86.3% 0 none);
43
- --gray-6: oklch(83.6% 0 none);
44
- --gray-7: oklch(80.1% 0 none);
45
- --gray-8: oklch(73.9% 0 none);
46
- --gray-9: oklch(58.8% 0 none);
47
- --gray-10: oklch(55.2% 0 none);
48
- --gray-11: oklch(48.8% 0 none);
49
- --gray-12: oklch(24.3% 0 none);
50
- }
51
- }
52
- }
53
-
54
- .dark,
55
- .dark-theme {
56
- --color-background: #1a1a1a;
57
-
58
- --gray-1: #0d0d0d;
59
- --gray-2: #181818;
60
- --gray-: #222;
61
- --gray-3: #292929;
62
- --gray-4: #313131;
63
- --gray-6: #3a3a3a;
64
- --gray-7: #484848;
65
- --gray-8: #606060;
66
- --gray-9: #6e6e6e;
67
- --gray-10: #7b7b7b;
68
- --gray-11: #b4b4b4;
69
- --gray-12: #eee;
70
- }
71
-
72
- @supports (color: color(display-p3 1 1 1)) {
73
- @media (color-gamut: p3) {
74
- .dark,
75
- .dark-theme {
76
- --color-background: oklch(0.218 0 0);
77
-
78
- --gray-1: oklch(15.9% 0 none);
79
- --gray-2: oklch(21% 0 none);
80
- --gray-: oklch(25.2% 0 none);
81
- --gray-3: oklch(28.2% 0 none);
82
- --gray-4: oklch(31.3% 0 none);
83
- --gray-6: oklch(34.9% 0 none);
84
- --gray-7: oklch(40.2% 0 none);
85
- --gray-8: oklch(48.8% 0 none);
86
- --gray-9: oklch(53.8% 0 none);
87
- --gray-10: oklch(58.4% 0 none);
88
- --gray-11: oklch(77% 0 none);
89
- --gray-12: oklch(94.9% 0 none);
90
- }
91
- }
92
- }
93
-
94
- :root {
95
- --background: var(--gray-1);
15
+ .light {
16
+ --background: color-mix(in oklch, var(--color-white) 20%, var(--gray-1));
17
+ --background-landing: var(--gray-1);
96
18
  --background-subtle: var(--gray-2);
97
- --background-element: var(--color-background);
19
+ --background-element: var(--color-white);
98
20
  --background-element-hover: var(--gray-3);
99
21
  --background-element-active: var(--gray-4);
100
- --border-subtle: var(--gray-4);
22
+ --border: var(--gray-7);
23
+ --border-subtle: var(--gray-5);
24
+ --ring: var(--blue-8);
101
25
  --foreground-subtle: var(--gray-11);
102
26
  --foreground: var(--gray-12);
27
+
28
+ --sidebar: var(--color-white);
29
+ }
30
+
31
+ .dark {
32
+ --background: color-mix(in oklch, var(--color-black) 20%, var(--gray-1));
33
+ --background-landing: var(--gray-1);
34
+ --background-subtle: color-mix(
35
+ in oklch,
36
+ var(--color-black) 10%,
37
+ var(--gray-2)
38
+ );
39
+ --background-element: color-mix(
40
+ in oklch,
41
+ var(--color-black) 20%,
42
+ var(--gray-3)
43
+ );
44
+ --background-element-hover: color-mix(
45
+ in oklch,
46
+ var(--color-black) 10%,
47
+ var(--gray-4)
48
+ );
49
+
50
+ --background-element-active: color-mix(
51
+ in oklch,
52
+ var(--color-black) 8%,
53
+ var(--gray-5)
54
+ );
55
+ --border: color-mix(in oklch, var(--color-black) 10%, var(--gray-6));
56
+ --border-subtle: color-mix(in oklch, var(--color-black) 25%, var(--gray-6));
57
+ --ring: var(--blue-8);
58
+ --foreground-subtle: var(--gray-11);
59
+ --foreground: var(--gray-12);
60
+
61
+ --sidebar: color-mix(in oklch, var(--color-black) 9%, var(--gray-1));
103
62
  }
package/dist/avatar.js CHANGED
@@ -27,7 +27,7 @@ function AvatarFallback({ className, ...props }) {
27
27
  function AvatarBadge({ className, ...props }) {
28
28
  return /*#__PURE__*/ jsx("span", {
29
29
  "data-slot": "avatar-badge",
30
- className: cn("absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary-hover text-primary-foreground bg-blend-color ring-2 ring-background", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5! group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
30
+ className: cn("absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5! group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
31
31
  ...props
32
32
  });
33
33
  }
package/dist/card.d.ts CHANGED
@@ -8,4 +8,4 @@ declare function CardDescription({ className, ...props }: React.ComponentProps<"
8
8
  declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
9
9
  declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
10
10
  declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
11
- export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
11
+ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, };
package/dist/card.js CHANGED
@@ -4,7 +4,7 @@ function Card({ className, size = "default", ...props }) {
4
4
  return /*#__PURE__*/ jsx("div", {
5
5
  "data-slot": "card",
6
6
  "data-size": size,
7
- className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-background-element py-4 text-foreground text-small ring-1 ring-border-subtle has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
7
+ className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-background-element py-4 text-foreground text-small ring-1 ring-border-subtle has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 dark:bg-background-subtle *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
8
8
  ...props
9
9
  });
10
10
  }
@@ -23,4 +23,4 @@ declare function ContextMenuLabel({ className, inset, ...props }: React.Componen
23
23
  declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
24
24
  declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
25
25
  declare function ContextMenuPositioner({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
26
- export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuCheckboxItem, };
26
+ export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuPositioner, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };
@@ -23,4 +23,4 @@ declare function DropdownMenuLabel({ className, inset, ...props }: React.Compone
23
23
  declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
24
24
  declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
25
25
  declare function DropdownMenuPositioner({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
26
- export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuPositioner, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, };
26
+ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
package/dist/field.d.ts CHANGED
@@ -27,4 +27,4 @@ declare function FieldError({ className, children, errors, ...props }: React.Com
27
27
  message?: string;
28
28
  } | undefined>;
29
29
  }): import("react/jsx-runtime").JSX.Element | null;
30
- export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
30
+ export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, };
@@ -1,7 +1,7 @@
1
- import { useEffect, useState } from "react";
1
+ import * as __rspack_external_react from "react";
2
2
  function useMediaQuery(query) {
3
- const [value, setValue] = useState(false);
4
- useEffect(()=>{
3
+ const [value, setValue] = __rspack_external_react.useState(false);
4
+ __rspack_external_react.useEffect(()=>{
5
5
  function onChange(event) {
6
6
  setValue(event.matches);
7
7
  }
@@ -27,4 +27,4 @@ declare function InputGroupButton({ className, type, variant, size, ...props }:
27
27
  declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
28
28
  declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
29
29
  declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
30
- export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
30
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, };
package/dist/input.js CHANGED
@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Input } from "@base-ui/react/input";
3
3
  import { IconEye, IconEyeOff } from "@tabler/icons-react";
4
4
  import { cva } from "cva";
5
- import { useId, useState } from "react";
6
5
  import { cn } from "./utils.js";
6
+ import * as __rspack_external_react from "react";
7
7
  const inputVariants = cva({
8
- base: "no-drag flex h-8.5 w-full min-w-0 items-center rounded-md border bg-background-element px-2.5 py-1 text-foreground text-small -outline-offset-1 transition-colors placeholder:text-foreground-subtle placeholder:text-small focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger",
8
+ base: "no-drag flex h-8.5 w-full min-w-0 items-center rounded-md border border-border-subtle bg-background-element px-2.5 py-1 text-foreground text-small -outline-offset-1 transition-colors placeholder:text-foreground-subtle placeholder:text-small focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger",
9
9
  variants: {
10
10
  variant: {
11
11
  default: "",
@@ -17,8 +17,8 @@ const inputVariants = cva({
17
17
  }
18
18
  });
19
19
  function input_Input({ className, type, disabled, ...props }) {
20
- const [isVisible, setIsVisible] = useState(false);
21
- const inputId = useId();
20
+ const [isVisible, setIsVisible] = __rspack_external_react.useState(false);
21
+ const inputId = __rspack_external_react.useId();
22
22
  if ("password" === type) {
23
23
  const toggleVisibility = ()=>setIsVisible((prevState)=>!prevState);
24
24
  return /*#__PURE__*/ jsxs("div", {
package/dist/popover.d.ts CHANGED
@@ -7,4 +7,4 @@ declare function PopoverClose({ ...props }: PopoverPrimitive.Close.Props): impor
7
7
  declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
8
8
  declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
9
9
  declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
10
- export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverHeader, PopoverTitle, PopoverDescription, };
10
+ export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
package/dist/select.js CHANGED
@@ -7,7 +7,7 @@ const select_Select = Select.Root;
7
7
  function SelectTrigger({ className, size = "default", children, ...props }) {
8
8
  return /*#__PURE__*/ jsxs(Select.Trigger, {
9
9
  "data-size": size,
10
- className: cn("flex h-8.5 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-background-element px-2.5 py-2 text-small -outline-offset-1 transition-colors focus-visible:outline-2 aria-invalid:outline-2 aria-invalid:outline-danger data-disabled:pointer-events-none data-[size=sm]:h-7 data-disabled:cursor-not-allowed data-placeholder:text-foreground-subtle data-disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
10
+ className: cn("flex h-8.5 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-border-subtle bg-background-element px-2.5 py-2 text-small -outline-offset-1 transition-colors focus-visible:outline-2 aria-invalid:outline-2 aria-invalid:outline-danger data-disabled:pointer-events-none data-[size=sm]:h-7 data-disabled:cursor-not-allowed data-placeholder:text-foreground-subtle data-disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
11
11
  "data-slot": "select-trigger",
12
12
  ...props,
13
13
  children: [
package/dist/sidebar.js CHANGED
@@ -5,7 +5,6 @@ import { mergeProps } from "@base-ui/react/merge-props";
5
5
  import { useRender } from "@base-ui/react/use-render";
6
6
  import { IconLayoutSidebar } from "@tabler/icons-react";
7
7
  import { cva } from "cva";
8
- import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
9
8
  import { Button } from "./button.js";
10
9
  import { useIsMobile } from "./hooks/use-mobile.js";
11
10
  import { Input } from "./input.js";
@@ -13,24 +12,25 @@ import { Separator } from "./separator.js";
13
12
  import { Skeleton } from "./skeleton.js";
14
13
  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
15
14
  import { cn } from "./utils.js";
15
+ import * as __rspack_external_react from "react";
16
16
  const SIDEBAR_COOKIE_NAME = "sidebar_state";
17
17
  const SIDEBAR_COOKIE_MAX_AGE = 604800;
18
18
  const SIDEBAR_WIDTH = "16rem";
19
19
  const SIDEBAR_WIDTH_MOBILE = "18rem";
20
20
  const SIDEBAR_WIDTH_ICON = "3rem";
21
21
  const SIDEBAR_KEYBOARD_SHORTCUT = "b";
22
- const SidebarContext = /*#__PURE__*/ createContext(null);
22
+ const SidebarContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
23
23
  function useSidebar() {
24
- const context = useContext(SidebarContext);
24
+ const context = __rspack_external_react.useContext(SidebarContext);
25
25
  if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
26
26
  return context;
27
27
  }
28
28
  function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
29
29
  const isMobile = useIsMobile();
30
- const [openMobile, setOpenMobile] = useState(false);
31
- const [_open, _setOpen] = useState(defaultOpen);
30
+ const [openMobile, setOpenMobile] = __rspack_external_react.useState(false);
31
+ const [_open, _setOpen] = __rspack_external_react.useState(defaultOpen);
32
32
  const open = openProp ?? _open;
33
- const setOpen = useCallback((value)=>{
33
+ const setOpen = __rspack_external_react.useCallback((value)=>{
34
34
  const openState = "function" == typeof value ? value(open) : value;
35
35
  if (setOpenProp) setOpenProp(openState);
36
36
  else _setOpen(openState);
@@ -39,12 +39,12 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
39
39
  setOpenProp,
40
40
  open
41
41
  ]);
42
- const toggleSidebar = useCallback(()=>isMobile ? setOpenMobile((open)=>!open) : setOpen((open)=>!open), [
42
+ const toggleSidebar = __rspack_external_react.useCallback(()=>isMobile ? setOpenMobile((open)=>!open) : setOpen((open)=>!open), [
43
43
  isMobile,
44
44
  setOpen,
45
45
  setOpenMobile
46
46
  ]);
47
- useEffect(()=>{
47
+ __rspack_external_react.useEffect(()=>{
48
48
  const handleKeyDown = (event)=>{
49
49
  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
50
50
  event.preventDefault();
@@ -57,7 +57,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
57
57
  toggleSidebar
58
58
  ]);
59
59
  const state = open ? "expanded" : "collapsed";
60
- const contextValue = useMemo(()=>({
60
+ const contextValue = __rspack_external_react.useMemo(()=>({
61
61
  state,
62
62
  open,
63
63
  setOpen,
@@ -84,7 +84,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
84
84
  "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
85
85
  ...style
86
86
  },
87
- className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-background-subtle", className),
87
+ className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
88
88
  ...props,
89
89
  children: children
90
90
  })
@@ -95,7 +95,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
95
95
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
96
96
  if ("none" === collapsible) return /*#__PURE__*/ jsx("div", {
97
97
  "data-slot": "sidebar",
98
- className: cn("flex h-full w-(--sidebar-width) flex-col bg-background-subtle text-foreground", className),
98
+ className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-foreground", className),
99
99
  ...props,
100
100
  children: children
101
101
  });
@@ -118,7 +118,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
118
118
  style: {
119
119
  width: SIDEBAR_WIDTH_MOBILE
120
120
  },
121
- className: cn("fixed z-50 flex w-(--sidebar-width) flex-col gap-4 border-r-border-subtle border-l-border-subtle bg-background-element bg-clip-padding text-smalltransition duration-200 ease-in-out data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
121
+ className: cn("fixed z-50 flex w-(--sidebar-width) flex-col gap-4 border-r-border-subtle border-l-border-subtle bg-sidebar bg-clip-padding text-smalltransition duration-200 ease-in-out data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
122
122
  children: [
123
123
  /*#__PURE__*/ jsx(Dialog.Title, {
124
124
  className: "sr-only",
@@ -157,7 +157,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
157
157
  children: /*#__PURE__*/ jsx("div", {
158
158
  "data-sidebar": "sidebar",
159
159
  "data-slot": "sidebar-inner",
160
- className: "flex size-full flex-col bg-background-subtle group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-border-subtle",
160
+ className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-border-subtle",
161
161
  children: children
162
162
  })
163
163
  })
@@ -234,7 +234,7 @@ function SidebarSeparator({ className, ...props }) {
234
234
  return /*#__PURE__*/ jsx(Separator, {
235
235
  "data-slot": "sidebar-separator",
236
236
  "data-sidebar": "separator",
237
- className: cn("mx-2 w-auto bg-border-subtle", className),
237
+ className: cn("w-auto bg-border-subtle", className),
238
238
  ...props
239
239
  });
240
240
  }
@@ -380,7 +380,7 @@ function SidebarMenuBadge({ className, ...props }) {
380
380
  });
381
381
  }
382
382
  function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
383
- const [width] = useState(()=>`${Math.floor(40 * Math.random()) + 50}%`);
383
+ const [width] = __rspack_external_react.useState(()=>`${Math.floor(40 * Math.random()) + 50}%`);
384
384
  return /*#__PURE__*/ jsxs("div", {
385
385
  "data-slot": "sidebar-menu-skeleton",
386
386
  "data-sidebar": "menu-skeleton",
@@ -405,7 +405,7 @@ function SidebarMenuSub({ className, ...props }) {
405
405
  return /*#__PURE__*/ jsx("ul", {
406
406
  "data-slot": "sidebar-menu-sub",
407
407
  "data-sidebar": "menu-sub",
408
- className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-border-subtle border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
408
+ className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-l-border-subtle px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
409
409
  ...props
410
410
  });
411
411
  }
package/dist/slider.js CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { Slider } from "@base-ui/react/slider";
4
- import { useMemo } from "react";
5
4
  import { cn } from "./utils.js";
5
+ import * as __rspack_external_react from "react";
6
6
  function slider_Slider({ className, children, defaultValue, value, min = 0, max = 100, ...props }) {
7
- const _values = useMemo(()=>Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
7
+ const _values = __rspack_external_react.useMemo(()=>Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
8
8
  min,
9
9
  max
10
10
  ], [
package/dist/tabs.d.ts CHANGED
@@ -1,7 +1,20 @@
1
1
  import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
2
- import type * as React from "react";
3
- declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
- declare function TabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
5
- declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>): import("react/jsx-runtime").JSX.Element;
6
- declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
7
- export { Tabs, TabsList, TabsTrigger, TabsContent };
2
+ import type { ReactNode } from "react";
3
+ export type TabsItem = {
4
+ value: string;
5
+ label: ReactNode;
6
+ className?: string;
7
+ render?: TabsPrimitive.Tab.Props["render"];
8
+ };
9
+ export type TabsProps = {
10
+ variant?: "segmented" | "underline";
11
+ tabs?: Array<TabsItem>;
12
+ value?: string;
13
+ selectedValue?: string;
14
+ onValueChange?: (value: string) => void;
15
+ activateOnFocus?: boolean;
16
+ className?: string;
17
+ listClassName?: string;
18
+ indicatorClassName?: string;
19
+ };
20
+ export declare function Tabs({ tabs, value, selectedValue, onValueChange, activateOnFocus, className, listClassName, indicatorClassName, variant, }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
package/dist/tabs.js CHANGED
@@ -2,39 +2,39 @@
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { Tabs } from "@base-ui/react/tabs";
4
4
  import { cn } from "./utils.js";
5
- function tabs_Tabs({ className, ...props }) {
5
+ function tabs_Tabs({ tabs, value, selectedValue, onValueChange, activateOnFocus, className, listClassName, indicatorClassName, variant = "segmented" }) {
6
+ const items = tabs ?? [];
7
+ if (0 === items.length) return null;
8
+ const fallbackValue = items[0]?.value;
9
+ const isControlled = void 0 !== value;
10
+ const rootProps = {
11
+ value: isControlled ? value : void 0,
12
+ defaultValue: isControlled ? void 0 : selectedValue ?? fallbackValue
13
+ };
14
+ const isSegmented = "segmented" === variant;
15
+ const isUnderline = "underline" === variant;
6
16
  return /*#__PURE__*/ jsx(Tabs.Root, {
7
- "data-slot": "tabs",
8
- className: cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", className),
9
- ...props
17
+ ...rootProps,
18
+ className: cn("relative isolate w-fit min-w-0 font-medium", className),
19
+ onValueChange: (nextValue)=>{
20
+ const stringValue = String(nextValue);
21
+ onValueChange?.(stringValue);
22
+ },
23
+ children: /*#__PURE__*/ jsxs(Tabs.List, {
24
+ activateOnFocus: activateOnFocus,
25
+ className: cn("scrollbar-hide relative flex w-fit min-w-0 shrink items-stretch", isSegmented && "h-9 rounded-lg border border-border-subtle bg-background-element-hover p-0.5", isUnderline && "h-7 gap-4 border-border border-b pb-2", listClassName),
26
+ children: [
27
+ items.map((tab)=>/*#__PURE__*/ jsx(Tabs.Tab, {
28
+ value: tab.value,
29
+ render: tab.render,
30
+ className: cn("relative z-2 flex cursor-pointer items-center whitespace-nowrap rounded-md bg-transparent text-small focus-visible:outline", isSegmented && "px-2.5 text-foreground-subtle hover:text-foreground focus-visible:outline aria-selected:text-foreground-subtle aria-selected:hover:text-foreground", isUnderline && "px-2 py-2.5 text-foreground-subtle hover:text-foreground aria-selected:hover:text-foreground", tab.className),
31
+ children: tab.label
32
+ }, tab.value)),
33
+ /*#__PURE__*/ jsx(Tabs.Indicator, {
34
+ className: cn("absolute left-0 z-1", "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-150", "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0", isSegmented && "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-background-element shadow-sm", isUnderline && "-bottom-px h-0.5 bg-primary", indicatorClassName)
35
+ })
36
+ ]
37
+ })
10
38
  });
11
39
  }
12
- function TabsList({ className, children, ...props }) {
13
- return /*#__PURE__*/ jsxs(Tabs.List, {
14
- "data-slot": "tabs-list",
15
- className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 rounded-lg bg-background-element-hover p-0.5 data-[orientation=vertical]:flex-col", className),
16
- ...props,
17
- children: [
18
- children,
19
- /*#__PURE__*/ jsx(Tabs.Indicator, {
20
- "data-slot": "tab-indicator",
21
- className: cn("absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-150 ease-in-out", "-z-1 rounded-md border-0 bg-background-element shadow-xs")
22
- })
23
- ]
24
- });
25
- }
26
- function TabsTrigger({ className, ...props }) {
27
- return /*#__PURE__*/ jsx(Tabs.Tab, {
28
- "data-slot": "tabs-trigger",
29
- className: cn("flex flex-1 shrink-0 cursor-default items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-foreground-subtle text-small transition-[color,background-color,box-shadow] focus-visible:outline-2 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
30
- ...props
31
- });
32
- }
33
- function TabsContent({ className, ...props }) {
34
- return /*#__PURE__*/ jsx(Tabs.Panel, {
35
- "data-slot": "tabs-content",
36
- className: cn("flex-1 outline-none", className),
37
- ...props
38
- });
39
- }
40
- export { TabsContent, TabsList, TabsTrigger, tabs_Tabs as Tabs };
40
+ export { tabs_Tabs as Tabs };
package/dist/textarea.js CHANGED
@@ -3,7 +3,7 @@ import { cn } from "./utils.js";
3
3
  function Textarea({ className, ...props }) {
4
4
  return /*#__PURE__*/ jsx("textarea", {
5
5
  "data-slot": "textarea",
6
- className: cn("scrollbar-hide field-sizing-content flex min-h-16 w-full overflow-y-auto rounded-md border bg-background-element px-2.5 pt-2 pb-6 text-small leading-normal transition-[color,box-shadow] placeholder:text-foreground-subtle placeholder:text-small focus-visible:outline-2 focus-visible:-outline-offset-1 disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 aria-invalid:outline aria-invalid:outline-danger", className),
6
+ className: cn("scrollbar-hide field-sizing-content flex min-h-16 w-full overflow-y-auto rounded-md border border-border-subtle bg-background-element px-2.5 pt-2 pb-6 text-small leading-normal transition-[color,box-shadow] placeholder:text-foreground-subtle placeholder:text-small focus-visible:outline-2 focus-visible:-outline-offset-1 disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 aria-invalid:outline aria-invalid:outline-danger", className),
7
7
  ...props
8
8
  });
9
9
  }
package/dist/toast.js CHANGED
@@ -48,7 +48,7 @@ function ToastList({ position = "bottom-right" }) {
48
48
  "right",
49
49
  isTop ? "up" : "down"
50
50
  ],
51
- className: cn("absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-md border border-border-subtle bg-background-element bg-clip-padding p-3 text-foreground shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)]", "data-[position*=right]:right-0 data-[position*=right]:left-auto", "data-[position*=left]:right-auto data-[position*=left]:left-0", "data-[position*=center]:right-0 data-[position*=center]:left-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-[position]:data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:[transform:translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
51
+ className: cn("absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border border-border-subtle bg-background-element bg-clip-padding p-3 text-foreground shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)]", "data-[position*=right]:right-0 data-[position*=right]:left-auto", "data-[position*=left]:right-auto data-[position*=left]:left-0", "data-[position*=center]:right-0 data-[position*=center]:left-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-[position]:data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:[transform:translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
52
52
  children: /*#__PURE__*/ jsxs(Toast.Content, {
53
53
  className: "flex items-center justify-between gap-1.5 overflow-hidden text-small! transition-opacity duration-250 data-behind:pointer-events-none data-expanded:pointer-events-auto data-behind:opacity-0 data-expanded:opacity-100",
54
54
  children: [
package/dist/tooltip.d.ts CHANGED
@@ -9,4 +9,4 @@ declare function TooltipContent({ className, children, align, side, sideOffset,
9
9
  side?: TooltipPrimitive.Positioner.Props["side"];
10
10
  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
11
11
  }): import("react/jsx-runtime").JSX.Element;
12
- export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPositioner, };
12
+ export { Tooltip, TooltipContent, TooltipPositioner, TooltipProvider, TooltipTrigger, };
package/dist/tooltip.js CHANGED
@@ -43,7 +43,7 @@ function TooltipContent({ className, children, align, side, sideOffset = 10, ...
43
43
  children: [
44
44
  children,
45
45
  /*#__PURE__*/ jsx(Tooltip.Arrow, {
46
- className: cn("z-50 size-2 rotate-45 bg-foreground fill-foreground", "data-[side=bottom]:-translate-y-1/2 data-[side=bottom]:top-[0.2px]", "data-[side=top]:bottom-[0.2px] data-[side=top]:translate-y-1/2", "data-[side=left]:right-0 data-[side=left]:translate-x-1/2", "data-[side=right]:-translate-x-1/2 data-[side=right]:left-[0.2px]", className)
46
+ className: cn("z-50 size-2 rotate-45 bg-foreground fill-foreground", "data-[side=bottom]:top-[0.2px] data-[side=bottom]:-translate-y-1/2", "data-[side=top]:bottom-[0.2px] data-[side=top]:translate-y-1/2", "data-[side=left]:right-0 data-[side=left]:translate-x-1/2", "data-[side=right]:left-[0.2px] data-[side=right]:-translate-x-1/2", className)
47
47
  })
48
48
  ]
49
49
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orphos",
3
- "version": "0.53.5",
3
+ "version": "0.54.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "exports": {
@@ -34,17 +34,17 @@
34
34
  "typecheck": "tsc --noEmit"
35
35
  },
36
36
  "devDependencies": {
37
- "@rsbuild/core": "~1.7.3",
37
+ "@rsbuild/core": "~1.7.5",
38
38
  "@rsbuild/plugin-react": "^1.4.6",
39
- "@rslib/core": "^0.20.0",
39
+ "@rslib/core": "^0.20.3",
40
40
  "@types/react": "^19.2.14",
41
41
  "react": "^19.2.4",
42
- "typescript": "^5.9.3"
42
+ "typescript": "^6.0.2"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@types/react": "latest",
46
46
  "react": ">=18.0.0",
47
- "tailwindcss": "^4.2.1"
47
+ "tailwindcss": "^4.2.2"
48
48
  },
49
49
  "peerDependenciesMeta": {
50
50
  "@types/react": {
@@ -55,7 +55,7 @@
55
55
  "@base-ui/react": "^1.3.0",
56
56
  "@origin-space/image-cropper": "^0.1.9",
57
57
  "@radix-ui/colors": "3.0.0",
58
- "@tabler/icons-react": "^3.40.0",
58
+ "@tabler/icons-react": "^3.41.1",
59
59
  "cva": "1.0.0-beta.4",
60
60
  "tailwind-merge": "^3.5.0",
61
61
  "tw-animate-css": "^1.4.0"
package/theme.css CHANGED
@@ -2,13 +2,12 @@
2
2
  @import "tw-animate-css";
3
3
  @import "./colors.css";
4
4
 
5
+ @custom-variant light (&:where(.light, .light *));
5
6
  @custom-variant dark (&:where(.dark, .dark *));
6
7
 
7
8
  :root {
8
9
  /* Base border radius */
9
10
  --radius: 0.375rem;
10
- --color-white: oklch(1 0 0);
11
- --color-black: oklch(0 0 0);
12
11
  }
13
12
 
14
13
  /* Theme */
@@ -17,10 +16,11 @@
17
16
 
18
17
  /* Fonts */
19
18
  --font-sans:
20
- "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont,
19
+ "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
21
20
  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans",
22
21
  "Helvetica Neue", sans-serif;
23
- --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
22
+ --font-mono:
23
+ "JetBrains Mono Variable", ui-monospace, "SF Mono", "Menlo", monospace;
24
24
 
25
25
  --text-micro: 0.6875rem;
26
26
  --text-mini: 0.75rem;
@@ -33,17 +33,21 @@
33
33
  --text-title4: 1.125rem;
34
34
 
35
35
  /* Colors */
36
- --color-focus-ring: var(--blue-8);
36
+ --color-focus-ring: var(--ring);
37
37
 
38
+ --color-background-landing: var(--background-landing);
38
39
  --color-background: var(--background);
39
40
  --color-background-subtle: var(--background-subtle);
40
41
  --color-background-element: var(--background-element);
41
42
  --color-background-element-hover: var(--background-element-hover);
42
43
  --color-background-element-active: var(--background-element-active);
44
+ --color-border: var(--border);
43
45
  --color-border-subtle: var(--border-subtle);
44
46
  --color-foreground-subtle: var(--foreground-subtle);
45
47
  --color-foreground: var(--foreground);
46
48
 
49
+ --color-sidebar: var(--sidebar);
50
+
47
51
  --color-primary: var(--tomato-9);
48
52
  --color-primary-hover: var(--tomato-10);
49
53
  --color-primary-border: var(--tomato-6);
@@ -87,16 +91,12 @@
87
91
 
88
92
  @layer base {
89
93
  * {
90
- @apply border-border-subtle outline-focus-ring;
94
+ @apply border-border outline-focus-ring;
91
95
  }
92
96
 
93
97
  ::selection {
94
98
  color: var(--color-primary-foreground);
95
- background-color: var(--tomato-6);
96
- }
97
-
98
- html {
99
- @apply overscroll-y-none;
99
+ background-color: var(--tomato-9);
100
100
  }
101
101
 
102
102
  body {
@@ -127,14 +127,10 @@
127
127
  --prose-link-color: var(--blue-9);
128
128
  --prose-code-color: var(--foreground);
129
129
  --prose-marker-color: var(--foreground);
130
- --prose-link-underline-color: var(--blue-a8);
131
- --prose-th-borders: var(--border-subtle);
132
- --prose-td-borders: color-mix(
133
- in oklab,
134
- var(--border-subtle) 75%,
135
- transparent
136
- );
137
- --prose-hr-color: var(--border-subtle);
130
+ --prose-link-underline-color: var(--blue-6);
131
+ --prose-th-borders: var(--border);
132
+ --prose-td-borders: var(--border-subtle);
133
+ --prose-hr-color: var(--color-border-subtle);
138
134
  --prose-blockquote-border-color: var(--tomato-9);
139
135
 
140
136
  color: var(--prose-color);
@@ -1,10 +0,0 @@
1
- export type CopyState = "idle" | "done" | "error";
2
- export type UseCopyToClipboardOptions = {
3
- onCopySuccess?: (text: string) => void;
4
- onCopyError?: (error: Error) => void;
5
- resetDelay?: number;
6
- };
7
- export declare function useCopyToClipboard({ onCopySuccess, onCopyError, resetDelay, }?: UseCopyToClipboardOptions): {
8
- readonly state: CopyState;
9
- readonly copy: (text: string | (() => string)) => Promise<void>;
10
- };
@@ -1,45 +0,0 @@
1
- import type React from "react";
2
- import { type ChangeEvent, type DragEvent, type InputHTMLAttributes } from "react";
3
- export type FileMetadata = {
4
- name: string;
5
- size: number;
6
- type: string;
7
- url: string;
8
- id: string;
9
- };
10
- export type FileWithPreview = {
11
- file: File | FileMetadata;
12
- id: string;
13
- preview?: string;
14
- };
15
- export type FileUploadOptions = {
16
- maxFiles?: number;
17
- maxSize?: number;
18
- accept?: string;
19
- multiple?: boolean;
20
- initialFiles?: FileMetadata[];
21
- onFilesChange?: (files: FileWithPreview[]) => void;
22
- onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
23
- };
24
- export type FileUploadState = {
25
- files: FileWithPreview[];
26
- isDragging: boolean;
27
- errors: string[];
28
- };
29
- export type FileUploadActions = {
30
- addFiles: (files: FileList | File[]) => void;
31
- removeFile: (id: string) => void;
32
- clearFiles: () => void;
33
- clearErrors: () => void;
34
- handleDragEnter: (e: DragEvent<HTMLElement>) => void;
35
- handleDragLeave: (e: DragEvent<HTMLElement>) => void;
36
- handleDragOver: (e: DragEvent<HTMLElement>) => void;
37
- handleDrop: (e: DragEvent<HTMLElement>) => void;
38
- handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;
39
- openFileDialog: () => void;
40
- getInputProps: (props?: InputHTMLAttributes<HTMLInputElement>) => InputHTMLAttributes<HTMLInputElement> & {
41
- ref: React.Ref<HTMLInputElement>;
42
- };
43
- };
44
- export declare const useFileUpload: (options?: FileUploadOptions) => [FileUploadState, FileUploadActions];
45
- export declare const formatBytes: (bytes: number, decimals?: number) => string;
@@ -1 +0,0 @@
1
- export declare function useMediaQuery(query: string): boolean;