raft-ui 0.0.1

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,228 @@
+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";
+
+const BRAILLE_SPINNER_STYLE = `
+@keyframes raft-braille-spinner {
+  0%,
+  9.99% {
+    content: "⠋";
+  }
+  10%,
+  19.99% {
+    content: "⠙";
+  }
+  20%,
+  29.99% {
+    content: "⠹";
+  }
+  30%,
+  39.99% {
+    content: "⠸";
+  }
+  40%,
+  49.99% {
+    content: "⠼";
+  }
+  50%,
+  59.99% {
+    content: "⠴";
+  }
+  60%,
+  69.99% {
+    content: "⠦";
+  }
+  70%,
+  79.99% {
+    content: "⠧";
+  }
+  80%,
+  89.99% {
+    content: "⠇";
+  }
+  90%,
+  100% {
+    content: "⠏";
+  }
+}
+
+[data-slot="spinner"] [data-spinner-glyph]::before {
+  content: "⠋";
+  animation: raft-braille-spinner 800ms steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-glyph]::before {
+    animation-duration: 1600ms;
+  }
+}
+`;
+
+const ELEGANT_SPINNER_STYLE = `
+@keyframes raft-elegant-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-elegant-spinner-dash {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-ring] {
+  animation: raft-elegant-spinner-spin 1600ms linear infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+  will-change: transform;
+}
+
+[data-slot="spinner"] [data-spinner-arc] {
+  animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  stroke-dasharray: 1 150;
+  stroke-dashoffset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-ring] {
+    animation-duration: 2400ms;
+    will-change: auto;
+  }
+
+  [data-slot="spinner"] [data-spinner-arc] {
+    animation: none;
+    stroke-dasharray: 72 150;
+    stroke-dashoffset: -30;
+  }
+}
+`;
+
+const SPINNER_STYLE = `${BRAILLE_SPINNER_STYLE}${ELEGANT_SPINNER_STYLE}`;
+
+const spinner = tv({
+  slots: {
+    root: [
+      "relative inline-flex shrink-0 items-center justify-center",
+      "leading-none text-current",
+    ],
+    glyph: "inline-block min-w-[1ch] font-mono tabular-nums",
+    ring: "block size-full shrink-0",
+  },
+  variants: {
+    theme: {
+      brutal: {},
+      elegant: {},
+    },
+    size: {
+      sm: {},
+      lg: {},
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+  compoundVariants: [
+    {
+      theme: "brutal",
+      size: "sm",
+      class: { root: "h-4 text-base" },
+    },
+    {
+      theme: "brutal",
+      size: "lg",
+      class: { root: "h-6 text-xl" },
+    },
+    {
+      theme: "elegant",
+      size: "sm",
+      class: { root: "size-3.5" },
+    },
+    {
+      theme: "elegant",
+      size: "lg",
+      class: { root: "size-[18px]" },
+    },
+  ],
+});
+
+const spinnerStyle = (
+  <style href="raft-ui-spinner" precedence="default">
+    {SPINNER_STYLE}
+  </style>
+);
+
+export type SpinnerProps = WithoutChildren<useRender.ComponentProps<"span">> &
+  Omit<VariantProps<typeof spinner>, "theme">;
+
+export function Spinner({ size = "sm", className, render, ...props }: SpinnerProps) {
+  const theme = useThemeFamily();
+  const { root, glyph, ring } = spinner({ theme, size });
+  const children =
+    theme === "elegant" ? (
+      <>
+        {spinnerStyle}
+        <svg
+          data-spinner-ring=""
+          aria-hidden="true"
+          className={ring()}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-20"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="2.5"
+          />
+          <circle
+            data-spinner-arc=""
+            className="opacity-80"
+            cx="12"
+            cy="12"
+            r="10"
+            fill="none"
+            pathLength="150"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="2.5"
+          />
+        </svg>
+      </>
+    ) : (
+      <>
+        {spinnerStyle}
+        <span data-spinner-glyph="" aria-hidden="true" className={glyph()} />
+      </>
+    );
+  const defaultProps: useRender.ElementProps<"span"> = {
+    role: "status",
+    "aria-label": "Loading",
+    className: root({ className }),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "spinner",
+      size,
+    },
+  });
+}

package/src/components/status/index.ts

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

package/src/components/status/status.tsx

@@ -0,0 +1,152 @@
+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";
+
+const STATUS_STYLE = `
+@keyframes raft-status-pulse-background {
+  0% {
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--status-color) 42%, transparent);
+  }
+  70%,
+  100% {
+    box-shadow: 0 0 0 8px color-mix(in oklch, var(--status-color) 0%, transparent);
+  }
+}
+`;
+
+const dot = tv({
+  slots: {
+    root: ["relative inline-block shrink-0 rounded-full", "[background-color:var(--status-color)]"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: "border border-line-strong",
+      },
+      elegant: {},
+    },
+    variant: {
+      default: {
+        root: "[--status-color:var(--color-gray-400)]",
+      },
+      primary: {
+        root: "[--status-color:var(--color-primary-400)]",
+      },
+      information: {
+        root: "[--status-color:var(--color-info-base)]",
+      },
+      muted: {
+        root: "[--status-color:var(--color-secondary-400)]",
+      },
+      accent: {
+        root: "[--status-color:var(--color-accent-400)]",
+      },
+      success: {
+        root: "[--status-color:var(--color-success-base)]",
+      },
+      warning: {
+        root: "[--status-color:var(--color-warning-base)]",
+      },
+      danger: {
+        root: "[--status-color:var(--color-danger-base)]",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const status = tv({
+  extend: dot,
+  variants: {
+    theme: {
+      brutal: {},
+      elegant: {},
+    },
+    size: {
+      xs: {
+        root: "size-1",
+      },
+      sm: {
+        root: "size-2",
+      },
+      md: {
+        root: "size-2.5",
+      },
+      lg: {
+        root: "size-[11px]",
+      },
+    },
+    pulse: {
+      true: {
+        root: "",
+      },
+      false: {
+        root: "",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    pulse: false,
+  },
+  compoundVariants: [
+    {
+      theme: "brutal",
+      variant: "success",
+      class: { root: "[--status-color:var(--color-brutal-lime)]" },
+    },
+    {
+      theme: "brutal",
+      variant: "warning",
+      class: { root: "[--status-color:var(--color-warning-base)]" },
+    },
+    {
+      theme: "brutal",
+      pulse: true,
+      class: { root: "animate-pulse" },
+    },
+    {
+      theme: "elegant",
+      pulse: true,
+      class: {
+        root: "[animation:raft-status-pulse-background_1.4s_ease-out_infinite] motion-reduce:animate-none",
+      },
+    },
+  ],
+});
+
+const statusStyle = (
+  <style href="raft-ui-status" precedence="default">
+    {STATUS_STYLE}
+  </style>
+);
+
+export type StatusProps = Omit<useRender.ComponentProps<"span">, "children"> &
+  Omit<VariantProps<typeof status>, "theme">;
+
+function StatusRoot({ size, variant, pulse, className, render, ...props }: StatusProps) {
+  const theme = useThemeFamily();
+  const { root } = status({ theme, size, variant, pulse });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: root({ className }),
+    children: statusStyle,
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "status",
+      variant,
+      pulse,
+      size,
+    },
+  });
+}
+
+export const Status = StatusRoot;

package/src/components/tabs/index.ts

@@ -0,0 +1,24 @@
+export {
+  Tabs,
+  TabsBackground,
+  TabsIndicator,
+  TabsLabel,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  SortableTabsList,
+  SortableTabsTab,
+  useOrderedTabs,
+} from "./tabs.tsx";
+export type {
+  OrderedTabItem,
+  SortableTabsListProps,
+  SortableTabsTabProps,
+  TabsBackgroundProps,
+  TabsIndicatorProps,
+  TabsLabelProps,
+  TabsListProps,
+  TabsPanelProps,
+  TabsProps,
+  TabsTabProps,
+} from "./tabs.tsx";