raft-ui 0.0.4 → 0.0.6

package/src/components/separator/separator.tsx

@@ -0,0 +1,40 @@
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+
+const separator = tv({
+  base: [
+    "shrink-0",
+    "data-[orientation=horizontal]:w-full",
+    "data-[orientation=vertical]:self-stretch",
+  ],
+  variants: {
+    theme: {
+      brutal: [
+        "data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:border-t-2 data-[orientation=horizontal]:border-black",
+        "data-[orientation=vertical]:w-0 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-black",
+      ],
+      elegant: [
+        "bg-line-muted",
+        "data-[orientation=horizontal]:h-px",
+        "data-[orientation=vertical]:w-px",
+      ],
+    },
+  },
+});
+
+export type SeparatorProps = StyledProps<BaseSeparator.Props>;
+
+export function Separator({ className, orientation = "horizontal", ...props }: SeparatorProps) {
+  const theme = useThemeFamily();
+
+  return (
+    <BaseSeparator
+      data-slot="separator"
+      orientation={orientation}
+      className={separator({ theme, className })}
+      {...props}
+    />
+  );
+}

package/src/components/spinner/index.ts

@@ -1,2 +1,2 @@
-export { Spinner } from "./spinner.tsx";
-export type { SpinnerProps } from "./spinner.tsx";
+export { Spinner } from "./spinner";
+export type { SpinnerProps } from "./spinner";

package/src/components/spinner/spinner.tsx

@@ -1,8 +1,8 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import type { WithoutChildren } from "../../lib/without-children.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import type { WithoutChildren } from "../../lib/without-children";
 
 const BRAILLE_SPINNER_STYLE = `
 @keyframes raft-braille-spinner {

package/src/components/status/index.ts

@@ -1,2 +1,2 @@
-export { Status } from "./status.tsx";
-export type { StatusProps } from "./status.tsx";
+export { Status } from "./status";
+export type { StatusProps } from "./status";

package/src/components/status/status.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const STATUS_STYLE = `
 @keyframes raft-status-pulse-background {

package/src/components/tabs/index.ts

@@ -9,7 +9,7 @@ export {
   SortableTabsList,
   SortableTabsTab,
   useOrderedTabs,
-} from "./tabs.tsx";
+} from "./tabs";
 export type {
   OrderedTabItem,
   SortableTabsListProps,
@@ -21,4 +21,4 @@ export type {
   TabsPanelProps,
   TabsProps,
   TabsTabProps,
-} from "./tabs.tsx";
+} from "./tabs";

package/src/components/tabs/tabs.tsx

@@ -16,6 +16,7 @@ import {
   useSensor,
   useSensors,
   type DragEndEvent,
+  type DragStartEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -23,9 +24,9 @@ import {
   SortableContext,
   useSortable,
 } from "@dnd-kit/sortable";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const tabs = tv({
   slots: {
@@ -46,6 +47,7 @@ const tabs = tv({
       brutal: {
         list: [
           "flex w-max max-w-full overflow-x-auto border-2 border-line-strong bg-layer-panel",
+          "data-[sorting=true]:[overflow-x:hidden]",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: "hidden",
@@ -79,6 +81,8 @@ const tabs = tv({
           "group/tabs-list relative flex h-12 w-max max-w-full items-center gap-6 px-4",
           "overflow-x-auto overflow-y-hidden overscroll-contain whitespace-nowrap",
           "border-b border-line-muted",
+          "data-[sorting=true]:[overflow-x:hidden]",
+          "data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: ["pointer-events-none absolute inset-x-0 top-0 z-0 h-px bg-line-muted"],
@@ -112,6 +116,8 @@ const tabs = tv({
           "group/tabs-list relative isolate flex h-auto w-max max-w-full items-center gap-1",
           "overflow-x-auto overflow-y-visible overscroll-contain whitespace-nowrap",
           "p-px",
+          "data-[sorting=true]:[overflow-x:hidden]",
+          "data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: ["pointer-events-none absolute inset-0 z-0 rounded-[7px] bg-layer-muted"],
@@ -123,6 +129,11 @@ const tabs = tv({
           "data-[active]:text-[oklch(38%_.006_285)]",
           "data-[active]:hover:text-[oklch(38%_.006_285)]",
           "data-[active]:[&_[data-slot=tabs-label]]:text-[0.8125rem]",
+          "data-[reorderable=true]:data-[active]:bg-layer-panel",
+          "data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
+          "group-has-[>[data-slot=tabs-background]]/tabs-list:data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.045),0_1px_1px_-1px_oklch(0%_0_0/.025),0_1px_2px_oklch(0%_0_0/.02)]",
+          "data-[dragging-active=true]:bg-layer-panel",
+          "data-[dragging-active=true]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
           "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5]",
           "[&_svg]:text-foreground-placeholder [&_svg]:transition-colors [&_svg]:duration-150 [&_svg]:ease-out",
           "hover:[&_svg]:text-[oklch(42%_.006_285)]",
@@ -145,6 +156,7 @@ const tabs = tv({
 
 type TabsReorderContextValue = {
   enabled: boolean;
+  activeId?: string | undefined;
 };
 
 const TabsReorderContext = createContext<TabsReorderContextValue>({ enabled: false });
@@ -152,7 +164,6 @@ const TabsValueContext = createContext<string | undefined>(undefined);
 type TabsListVariant = "default" | "underline";
 
 const TabsListVariantContext = createContext<TabsListVariant>("default");
-const REORDER_ENABLED_CONTEXT = { enabled: true } as const satisfies TabsReorderContextValue;
 
 export type TabsProps<T extends string = string> = StyledProps<
   Omit<BaseTabs.Root.Props, "defaultValue" | "onValueChange" | "value">
@@ -199,6 +210,7 @@ export type TabsListProps = StyledProps<BaseTabs.List.Props> & {
 
 export function TabsList({ className, children, variant = "default", ...props }: TabsListProps) {
   const theme = useThemeFamily();
+  const reorder = use(TabsReorderContext);
   const resolvedVariant = theme === "elegant" ? variant : "underline";
   const { list } = tabs({ theme, variant: resolvedVariant });
 
@@ -211,7 +223,7 @@ export function TabsList({ className, children, variant = "default", ...props }:
         {...props}
       >
         {children}
-        {theme === "elegant" ? <TabsIndicator /> : null}
+        {theme === "elegant" && !reorder.enabled ? <TabsIndicator /> : null}
       </BaseTabs.List>
     </TabsListVariantContext.Provider>
   );
@@ -229,13 +241,25 @@ export function SortableTabsList<T extends string = string>({
   variant = "default",
   ...props
 }: SortableTabsListProps<T>) {
+  const [activeId, setActiveId] = useState<string | undefined>(undefined);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     useSensor(TouchSensor, { activationConstraint: { delay: 350, tolerance: 8 } }),
   );
   const tabIds = useMemo(() => value.map(String), [value]);
+  const reorderContext = useMemo(
+    () => ({ enabled: true, activeId }) as const satisfies TabsReorderContextValue,
+    [activeId],
+  );
+  const handleDragStart = useCallback(({ active }: DragStartEvent) => {
+    setActiveId(String(active.id));
+  }, []);
+  const handleDragCancel = useCallback(() => {
+    setActiveId(undefined);
+  }, []);
   const handleDragEnd = useCallback(
     ({ active, over }: DragEndEvent) => {
+      setActiveId(undefined);
       if (!over || active.id === over.id) return;
       const oldIndex = tabIds.indexOf(String(active.id));
       const newIndex = tabIds.indexOf(String(over.id));
@@ -246,10 +270,17 @@ export function SortableTabsList<T extends string = string>({
   );
 
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
+      autoScroll={false}
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragCancel={handleDragCancel}
+      onDragEnd={handleDragEnd}
+    >
       <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
-        <TabsReorderContext.Provider value={REORDER_ENABLED_CONTEXT}>
-          <TabsList variant={variant} {...props}>
+        <TabsReorderContext.Provider value={reorderContext}>
+          <TabsList variant={variant} {...props} data-sorting={activeId ? "true" : undefined}>
             {children}
           </TabsList>
         </TabsReorderContext.Provider>
@@ -273,10 +304,12 @@ export function SortableTabsTab<T extends string = string>({
   ...props
 }: SortableTabsTabProps<T>) {
   const reorder = use(TabsReorderContext);
+  const activeValue = use(TabsValueContext);
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: value,
     disabled: !reorder.enabled,
   });
+  const isDraggingActive = isDragging && activeValue === String(value);
 
   if (!reorder.enabled) {
     return <TabsTabButton value={value} {...props} />;
@@ -295,10 +328,11 @@ export function SortableTabsTab<T extends string = string>({
     <TabsTabButton
       value={value}
       sortableRef={setNodeRef}
+      {...props}
+      data-dragging-active={isDraggingActive ? "true" : undefined}
       data-dragging-source={isDragging ? "true" : undefined}
       data-reorderable="true"
       style={style}
-      {...props}
       {...sortableAttributes}
       {...listeners}
     />

package/src/components/text/index.ts

@@ -1,2 +1,2 @@
-export { Text, TextHeading, TextMono, TextSans } from "./text.tsx";
-export type { TextHeadingProps, TextMonoProps, TextSansProps } from "./text.tsx";
+export { Text, TextHeading, TextMono, TextSans } from "./text";
+export type { TextHeadingProps, TextMonoProps, TextSansProps } from "./text";

package/src/components/text/text.tsx

@@ -1,12 +1,13 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv.ts";
+import { tv, type VariantProps } from "../../lib/tv";
 
 const textColorVariants = {
   default: ["text-foreground-strong"],
   primary: ["text-primary-700"],
   information: ["text-info-dark"],
   muted: ["text-foreground-muted"],
+  placeholder: ["text-foreground-placeholder"],
   accent: ["text-accent-700"],
   success: ["text-success-base"],
   warning: ["text-warning-base"],

package/src/components/textarea/index.ts

@@ -1,2 +1,2 @@
-export { Textarea, TextareaCounter, TextareaGroup } from "./textarea.tsx";
-export type { TextareaCounterProps, TextareaGroupProps, TextareaProps } from "./textarea.tsx";
+export { Textarea, TextareaCounter, TextareaGroup } from "./textarea";
+export type { TextareaCounterProps, TextareaGroupProps, TextareaProps } from "./textarea";

package/src/components/textarea/textarea.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef } from "react";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import type { WithoutChildren } from "../../lib/without-children.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import type { WithoutChildren } from "../../lib/without-children";
 
 const textarea = tv({
   slots: {

package/src/components/toggle-group/index.ts

@@ -1,12 +1,7 @@
-export {
-  ToggleGroup,
-  ToggleGroupCount,
-  ToggleGroupItem,
-  ToggleGroupLabel,
-} from "./toggle-group.tsx";
+export { ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel } from "./toggle-group";
 export type {
   ToggleGroupCountProps,
   ToggleGroupItemProps,
   ToggleGroupLabelProps,
   ToggleGroupProps,
-} from "./toggle-group.tsx";
+} from "./toggle-group";

package/src/components/toggle-group/toggle-group.tsx

@@ -1,9 +1,9 @@
 import type { ComponentPropsWithRef } from "react";
 import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const toggleGroup = tv({
   slots: {

package/src/components/tooltip/index.ts

@@ -1,14 +1,8 @@
-export {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip.tsx";
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip";
 export type {
   TooltipContentProps,
   TooltipPortalProps,
   TooltipProps,
   TooltipProviderProps,
   TooltipTriggerProps,
-} from "./tooltip.tsx";
+} from "./tooltip";

package/src/components/tooltip/tooltip.tsx

@@ -1,16 +1,16 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import type { ComponentProps } from "react";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const tooltip = tv({
   slots: {
     trigger: ["select-none"],
     positioner: ["isolate z-50 outline-none"],
     content: [
-      "relative inline-flex max-w-xs items-center gap-1.5 px-2.5 py-1.5",
-      "text-xs leading-4 whitespace-normal",
+      "relative inline-flex max-w-xs items-center gap-1.5 px-3 py-2",
+      "text-[13px] leading-[18px] whitespace-normal",
       "origin-[var(--transform-origin)] outline-none",
       "transition-[opacity,transform] duration-100",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -46,16 +46,31 @@ const tooltip = tv({
       elegant: {
         content: [
           "rounded-md bg-layer-popover",
-          "font-sans text-xs font-medium tracking-[-0.005em] text-foreground-strong",
+          "font-sans text-[13px] font-medium tracking-[-0.005em] text-foreground-strong",
           "shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
           "[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0",
         ],
         arrow: [],
       },
     },
+    variant: {
+      default: {},
+      inverse: {
+        content: [
+          "bg-foreground-strong text-foreground-inverse",
+          "!shadow-[0_12px_24px_0_oklch(0.21_0.006_285_/_0.045),0_1px_2px_0_oklch(0.21_0.006_285_/_0.035)]",
+          "[&_[data-slot=kbd]]:bg-white/10 [&_[data-slot=kbd]]:text-foreground-inverse [&_[data-slot=kbd]]:ring-0",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
   },
 });
 
+type TooltipStyleProps = VariantProps<typeof tooltip>;
+
 export type TooltipProviderProps = BaseTooltip.Provider.Props;
 
 export function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {
@@ -88,25 +103,35 @@ export function TooltipPortal(props: TooltipPortalProps) {
   return <BaseTooltip.Portal data-slot="tooltip-portal" {...props} />;
 }
 
-type TooltipArrowProps = StyledProps<BaseTooltip.Arrow.Props>;
+type TooltipArrowProps = StyledProps<BaseTooltip.Arrow.Props> & Pick<TooltipStyleProps, "variant">;
 
-function TooltipArrow({ className, ...props }: TooltipArrowProps) {
+function TooltipArrow({ className, variant, ...props }: TooltipArrowProps) {
   const theme = useThemeFamily();
-  const { arrow } = tooltip({ theme });
+  const { arrow } = tooltip({ theme, variant });
   return (
     <BaseTooltip.Arrow data-slot="tooltip-arrow" className={arrow({ className })} {...props}>
-      <TooltipArrowSvg />
+      <TooltipArrowSvg variant={variant} />
     </BaseTooltip.Arrow>
   );
 }
 
-function TooltipArrowSvg(props: ComponentProps<"svg">) {
+function TooltipArrowSvg({
+  variant,
+  ...props
+}: ComponentProps<"svg"> & Pick<TooltipStyleProps, "variant">) {
+  const isInverse = variant === "inverse";
+
   return (
     <svg width="12" height="6" viewBox="0 0 12 6" fill="none" {...props}>
-      <path d="M1 0H11L6 5.25Z" className="fill-layer-popover" />
+      <path
+        d="M1 0H11L6 5.25Z"
+        className={isInverse ? "fill-foreground-strong" : "fill-layer-popover"}
+      />
       <path
         d="M1 0.5L6 5.25L11 0.5"
-        className="stroke-[oklch(0.21_0.006_285_/_0.10)]"
+        className={
+          isInverse ? "stroke-[oklch(0_0_0_/_0.18)]" : "stroke-[oklch(0.21_0.006_285_/_0.10)]"
+        }
         strokeLinecap="round"
         strokeLinejoin="round"
         vectorEffect="non-scaling-stroke"
@@ -132,7 +157,7 @@ export type TooltipContentProps = StyledProps<BaseTooltip.Popup.Props> &
     | "sticky"
   > & {
     portalProps?: TooltipPortalProps;
-  };
+  } & Pick<TooltipStyleProps, "variant">;
 
 export function TooltipContent({
   align = "center",
@@ -148,12 +173,13 @@ export function TooltipContent({
   sideOffset = 6,
   sticky,
   portalProps,
+  variant,
   className,
   children,
   ...props
 }: TooltipContentProps) {
   const theme = useThemeFamily();
-  const { positioner, content } = tooltip({ theme });
+  const { positioner, content } = tooltip({ theme, variant });
 
   return (
     <BaseTooltip.Portal {...portalProps}>
@@ -178,7 +204,7 @@ export function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipArrow />
+          <TooltipArrow variant={variant} />
         </BaseTooltip.Popup>
       </BaseTooltip.Positioner>
     </BaseTooltip.Portal>