raft-ui 0.0.5 → 0.0.6

package/src/components/dialog/index.ts

@@ -0,0 +1,26 @@
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+export type {
+  DialogBodyProps,
+  DialogCloseProps,
+  DialogContentProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+} from "./dialog";

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -1,10 +1,10 @@
 import type { ComponentPropsWithRef } from "react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
-import { tv } from "../../lib/tv.ts";
-import { Badge, type BadgeProps } from "../badge/index.ts";
-import { Kbd, type KbdProps } from "../kbd/index.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { Badge, type BadgeProps } from "../badge/index";
+import { Kbd, type KbdProps } from "../kbd/index";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const dropdownMenu = tv({
   slots: {

package/src/components/dropdown-menu/index.ts

@@ -16,7 +16,7 @@ export {
   DropdownMenuSubmenuTrigger,
   DropdownMenuPopup,
   DropdownMenuTrigger,
-} from "./dropdown-menu.tsx";
+} from "./dropdown-menu";
 export type {
   DropdownMenuCheckboxItemIndicatorProps,
   DropdownMenuCheckboxItemProps,
@@ -35,4 +35,4 @@ export type {
   DropdownMenuSubmenuTriggerProps,
   DropdownMenuPopupProps,
   DropdownMenuTriggerProps,
-} from "./dropdown-menu.tsx";
+} from "./dropdown-menu";

package/src/components/empty-state/empty-state.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 // EmptyState family: a quiet "nothing here yet" surface — muted icon, muted
 // title, optional description + action. Composed from a centered root, a

package/src/components/empty-state/index.ts

@@ -5,7 +5,7 @@ export {
   EmptyStateTitle,
   EmptyStateDescription,
   EmptyStateActions,
-} from "./empty-state.tsx";
+} from "./empty-state";
 export type {
   EmptyStateProps,
   EmptyStateContentProps,
@@ -13,4 +13,4 @@ export type {
   EmptyStateTitleProps,
   EmptyStateDescriptionProps,
   EmptyStateActionsProps,
-} from "./empty-state.tsx";
+} from "./empty-state";

package/src/components/field/field.tsx

@@ -1,8 +1,8 @@
 import { Field as BaseField } from "@base-ui/react/field";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { LabelAsterisk, LabelOptional } from "../label/label.tsx";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { LabelAsterisk, LabelOptional } from "../label/label";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const field = tv({
   slots: {

package/src/components/field/index.ts

@@ -6,7 +6,7 @@ export {
   FieldItem,
   FieldLabel,
   FieldValidity,
-} from "./field.tsx";
+} from "./field";
 export type {
   FieldControlProps,
   FieldProps,
@@ -15,4 +15,4 @@ export type {
   FieldErrorProps,
   FieldItemProps,
   FieldValidityProps,
-} from "./field.tsx";
+} from "./field";

package/src/components/inline-code/index.ts

@@ -1,2 +1,2 @@
-export { InlineCode } from "./inline-code.tsx";
-export type { InlineCodeProps } from "./inline-code.tsx";
+export { InlineCode } from "./inline-code";
+export type { InlineCodeProps } from "./inline-code";

package/src/components/inline-code/inline-code.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef } from "react";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const inlineCode = tv({
   slots: {

package/src/components/input/index.ts

@@ -1,2 +1,2 @@
-export { Input } from "./input.tsx";
-export type { InputProps } from "./input.tsx";
+export { Input } from "./input";
+export type { InputProps } from "./input";

package/src/components/input/input.tsx

@@ -1,8 +1,8 @@
 import { Input as BaseInput } from "@base-ui/react/input";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import type { WithoutChildren } from "../../lib/without-children.ts";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import type { WithoutChildren } from "../../lib/without-children";
 
 // The brutal field visual (formerly the app's `.input-brutal` class). The error
 // state is driven by `aria-invalid` so the control styles itself while Field /

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

@@ -1,7 +1,7 @@
-export { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.tsx";
+export { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group";
 export type {
   InputGroupProps,
   InputGroupAddonProps,
   InputGroupInputProps,
   InputGroupAddonTextProps,
-} from "./input-group.tsx";
+} from "./input-group";

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

@@ -1,10 +1,10 @@
 import type { ComponentPropsWithRef } from "react";
 import { Input as BaseInput } from "@base-ui/react/input";
-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 type { WithoutChildren } from "../../lib/without-children.ts";
-import { type InputBehaviorProps } from "../input/input.tsx";
+import { tv, type VariantProps } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import type { WithoutChildren } from "../../lib/without-children";
+import { type InputBehaviorProps } from "../input/input";
 
 // InputGroup moves the input shell onto the wrapper so addons can live inside the
 // bordered box. State styling is driven by the inner control via `has-*`.

package/src/components/kbd/index.ts

@@ -1,2 +1,2 @@
-export { Kbd, KbdGroup } from "./kbd.tsx";
-export type { KbdGroupProps, KbdProps } from "./kbd.tsx";
+export { Kbd, KbdGroup } from "./kbd";
+export type { KbdGroupProps, KbdProps } from "./kbd";

package/src/components/kbd/kbd.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef } from "react";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const kbd = tv({
   slots: {

package/src/components/label/index.ts

@@ -1,7 +1,2 @@
-export { Label, LabelAsterisk, LabelOptional, LabelSub } from "./label.tsx";
-export type {
-  LabelAsteriskProps,
-  LabelOptionalProps,
-  LabelProps,
-  LabelSubProps,
-} from "./label.tsx";
+export { Label, LabelAsterisk, LabelOptional, LabelSub } from "./label";
+export type { LabelAsteriskProps, LabelOptionalProps, LabelProps, LabelSubProps } from "./label";

package/src/components/label/label.tsx

@@ -1,8 +1,8 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import type { ComponentPropsWithRef } from "react";
-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 label = tv({
   slots: {

package/src/components/lightbox/index.ts

@@ -9,7 +9,7 @@ export {
   LightboxStage,
   LightboxTitle,
   LightboxTrigger,
-} from "./lightbox.tsx";
+} from "./lightbox";
 export type {
   LightboxActionsProps,
   LightboxCloseProps,
@@ -21,4 +21,4 @@ export type {
   LightboxStageProps,
   LightboxTitleProps,
   LightboxTriggerProps,
-} from "./lightbox.tsx";
+} from "./lightbox";

package/src/components/lightbox/lightbox.tsx

@@ -3,9 +3,9 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useCallback, useRef, useState, type ReactNode, type RefObject } 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 } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const lightbox = tv({
   slots: {

package/src/components/list-item/index.ts

@@ -7,7 +7,7 @@ export {
   ListItemRow,
   ListItemMeta,
   ListItemTitle,
-} from "./list-item.tsx";
+} from "./list-item";
 export type {
   ListItemActionGroupProps,
   ListItemBodyProps,
@@ -17,4 +17,4 @@ export type {
   ListItemMetaProps,
   ListItemProps,
   ListItemTitleProps,
-} from "./list-item.tsx";
+} from "./list-item";

package/src/components/list-item/list-item.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 listItem = tv({
   slots: {

package/src/components/media-list-item/index.ts

@@ -7,7 +7,7 @@ export {
   MediaListItemSubtitle,
   MediaListItemAside,
   MediaListItemVisual,
-} from "./media-list-item.tsx";
+} from "./media-list-item";
 export type {
   MediaListItemProps,
   MediaListItemActionGroupProps,
@@ -17,4 +17,4 @@ export type {
   MediaListItemSubtitleProps,
   MediaListItemAsideProps,
   MediaListItemVisualProps,
-} from "./media-list-item.tsx";
+} from "./media-list-item";

package/src/components/media-list-item/media-list-item.tsx

@@ -2,10 +2,10 @@ import type { ComponentPropsWithRef } from "react";
 import { Button as BaseButton } from "@base-ui/react/button";
 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 { cn } from "../../lib/cn.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import { ListItem, type ListItemProps } from "../list-item/list-item.tsx";
+import { tv, type VariantProps } from "../../lib/tv";
+import { cn } from "../../lib/cn";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import { ListItem, type ListItemProps } from "../list-item/list-item";
 
 const mediaItem = tv({
   slots: {

package/src/components/notification-center/index.ts

@@ -17,7 +17,7 @@ export type {
   NotificationCenterScrollerProps,
   NotificationCenterTitleProps,
   NotificationCenterTriggerProps,
-} from "./notification-center.tsx";
+} from "./notification-center";
 export {
   NotificationCenter,
   NotificationCenterActionButton,
@@ -36,4 +36,4 @@ export {
   NotificationCenterScroller,
   NotificationCenterTitle,
   NotificationCenterTrigger,
-} from "./notification-center.tsx";
+} from "./notification-center";

package/src/components/notification-center/notification-center.tsx

@@ -2,11 +2,11 @@ import { Popover as BasePopover } from "@base-ui/react/popover";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { AlertTriangle, CheckCircle2, Info } from "lucide-react";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import { EmptyState, type EmptyStateProps } from "../empty-state/empty-state.tsx";
-import { Button, type ButtonProps } from "../button/button.tsx";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv, type VariantProps } from "../../lib/tv";
+import { EmptyState, type EmptyStateProps } from "../empty-state/empty-state";
+import { Button, type ButtonProps } from "../button/button";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const notificationCenter = tv({
   slots: {

package/src/components/panel-header/index.ts

@@ -8,7 +8,7 @@ export {
   PanelHeaderTitle,
   PanelHeaderTitleRow,
   PanelHeaderVisual,
-} from "./panel-header.tsx";
+} from "./panel-header";
 export type {
   PanelHeaderActionsProps,
   PanelHeaderContentProps,
@@ -19,4 +19,4 @@ export type {
   PanelHeaderTitleProps,
   PanelHeaderTitleRowProps,
   PanelHeaderVisualProps,
-} from "./panel-header.tsx";
+} from "./panel-header";

package/src/components/panel-header/panel-header.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const panelHeader = tv({
   slots: {

package/src/components/popover/index.ts

@@ -12,7 +12,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   PopoverViewport,
-} from "./popover.tsx";
+} from "./popover";
 export type {
   PopoverArrowProps,
   PopoverBackdropProps,
@@ -27,4 +27,4 @@ export type {
   PopoverTitleProps,
   PopoverTriggerProps,
   PopoverViewportProps,
-} from "./popover.tsx";
+} from "./popover";

package/src/components/popover/popover.tsx

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const popover = tv({
   slots: {

package/src/components/preview-shell/index.ts

@@ -1,2 +1,2 @@
-export { PreviewShell } from "./preview-shell.tsx";
-export type { PreviewShellProps } from "./preview-shell.tsx";
+export { PreviewShell } from "./preview-shell";
+export type { PreviewShellProps } from "./preview-shell";

package/src/components/preview-shell/preview-shell.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 previewShell = tv({
   slots: {

package/src/components/quoted-message-card/index.ts

@@ -15,7 +15,7 @@ export {
   QuotedMessageCardThread,
   QuotedMessageCardTimestamp,
   QuotedMessageCardUnavailable,
-} from "./quoted-message-card.tsx";
+} from "./quoted-message-card";
 export type {
   QuotedMessageCardAttachmentsProps,
   QuotedMessageCardAuthorNameProps,
@@ -33,4 +33,4 @@ export type {
   QuotedMessageCardThreadProps,
   QuotedMessageCardTimestampProps,
   QuotedMessageCardUnavailableProps,
-} from "./quoted-message-card.tsx";
+} from "./quoted-message-card";

package/src/components/quoted-message-card/quoted-message-card.tsx

@@ -1,9 +1,9 @@
 import { MessageSquare } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { PreviewShell, type PreviewShellProps } from "../preview-shell/preview-shell.tsx";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { PreviewShell, type PreviewShellProps } from "../preview-shell/preview-shell";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 // A quoted-message preview routed through PreviewShell. The source's app-domain
 // fields (channel object, author fetching, markdown rendering, attachments

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

@@ -1,6 +1,2 @@
-export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./radio-group.tsx";
-export type {
-  RadioGroupIndicatorProps,
-  RadioGroupItemProps,
-  RadioGroupProps,
-} from "./radio-group.tsx";
+export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./radio-group";
+export type { RadioGroupIndicatorProps, RadioGroupItemProps, RadioGroupProps } from "./radio-group";

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

@@ -1,9 +1,9 @@
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { tv } from "../../lib/tv.ts";
-import { cn } from "../../lib/cn.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { cn } from "../../lib/cn";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const radioGroup = tv({
   slots: {

package/src/components/section-header/index.ts

@@ -5,7 +5,7 @@ export {
   SectionHeaderCount,
   SectionHeaderIcon,
   SectionHeaderTitle,
-} from "./section-header.tsx";
+} from "./section-header";
 export type {
   SectionHeaderActionsProps,
   SectionHeaderContentProps,
@@ -13,4 +13,4 @@ export type {
   SectionHeaderIconProps,
   SectionHeaderProps,
   SectionHeaderTitleProps,
-} from "./section-header.tsx";
+} from "./section-header";

package/src/components/section-header/section-header.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { SectionLabel, type SectionLabelProps } from "../section-label/section-label.tsx";
+import { tv } from "../../lib/tv";
+import { SectionLabel, type SectionLabelProps } from "../section-label/section-label";
 
 const sectionHeader = tv({
   slots: {

package/src/components/section-label/index.ts

@@ -1,2 +1,2 @@
-export { SectionLabel } from "./section-label.tsx";
-export type { SectionLabelProps } from "./section-label.tsx";
+export { SectionLabel } from "./section-label";
+export type { SectionLabelProps } from "./section-label";

package/src/components/section-label/section-label.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { tv } from "../../lib/tv";
+import { useThemeFamily } from "../../lib/theme/use-theme";
 
 const sectionLabel = tv({
   slots: {

package/src/components/segmented-control/index.ts

@@ -3,10 +3,10 @@ export {
   SegmentedControlCount,
   SegmentedControlItem,
   SegmentedControlLabel,
-} from "./segmented-control.tsx";
+} from "./segmented-control";
 export type {
   SegmentedControlCountProps,
   SegmentedControlItemProps,
   SegmentedControlLabelProps,
   SegmentedControlProps,
-} from "./segmented-control.tsx";
+} from "./segmented-control";

package/src/components/segmented-control/segmented-control.tsx

@@ -1,9 +1,9 @@
 import type { ComponentPropsWithRef } from "react";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-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 segmentedControl = tv({
   slots: {

package/src/components/select/index.ts

@@ -17,7 +17,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-} from "./select.tsx";
+} from "./select";
 export type {
   SelectArrowProps,
   SelectContentProps,
@@ -37,4 +37,4 @@ export type {
   SelectSeparatorProps,
   SelectTriggerProps,
   SelectValueProps,
-} from "./select.tsx";
+} from "./select";

package/src/components/select/select.tsx

@@ -1,10 +1,10 @@
 import type { ComponentPropsWithRef } from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { Check, ChevronDown } from "lucide-react";
-import { tv } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-import { Button } from "../button/index.ts";
+import { tv } from "../../lib/tv";
+import type { StyledProps } from "../../lib/styled-props";
+import { useThemeFamily } from "../../lib/theme/use-theme";
+import { Button } from "../button/index";
 
 const select = tv({
   slots: {

package/src/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";

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";