raft-ui 0.0.6 → 0.0.7

package/src/components/spinner/spinner.tsx

@@ -1,228 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-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 {
-  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

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

package/src/components/status/status.tsx

@@ -1,152 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { tv, type VariantProps } from "../../lib/tv";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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

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