@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/toggle-group.tsx

@@ -0,0 +1,137 @@
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, CSSProperties, JSX } from "react";
+
+import type { VariantProps } from "#/lib/utils";
+import { cn } from "#/lib/utils";
+import { toggleVariants } from "#/variants/toggle";
+
+/* -----------------------------------------------------------------------------
+ * Context: ToggleGroup
+ * -------------------------------------------------------------------------- */
+
+const TOGGLE_GROUP_NAME = "ToggleGroup";
+
+type ScopedProps<P> = P & { __scopeToggleGroup?: Context.Scope };
+
+const [createToggleGroupContext] = Context.createContextScope(TOGGLE_GROUP_NAME, [
+  ToggleGroupPrimitive.createToggleGroupScope,
+]);
+
+const useToggleGroupScope = ToggleGroupPrimitive.createToggleGroupScope();
+
+const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<
+  VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
+    spacing?: number;
+  }
+>(TOGGLE_GROUP_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: ToggleGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
+    spacing?: number;
+  };
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ToggleGroup({
+  __scopeToggleGroup,
+  children,
+  className,
+  orientation = "horizontal",
+  size,
+  spacing = 2,
+  variant,
+  ...props
+}: ScopedProps<ToggleGroupProps>): JSX.Element {
+  const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+
+  return (
+    <ToggleGroupProvider
+      orientation={orientation}
+      scope={__scopeToggleGroup}
+      size={size}
+      spacing={spacing}
+      variant={variant}
+    >
+      <ToggleGroupPrimitive.Root
+        className={cn(
+          "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
+          className,
+        )}
+        data-orientation={orientation}
+        data-size={size}
+        data-slot="toggle-group"
+        data-spacing={spacing}
+        data-variant={variant}
+        style={{ "--gap": spacing } as CSSProperties}
+        {...toggleGroupScope}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Root>
+    </ToggleGroupProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ToggleGroupItem
+ * -------------------------------------------------------------------------- */
+
+const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ToggleGroupItemProps = ScopedProps<
+  ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ToggleGroupItem({
+  __scopeToggleGroup,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: ToggleGroupItemProps): JSX.Element {
+  const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
+  const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t data-on:bg-muted",
+        toggleVariants({
+          className,
+          size: context.size ?? size,
+          variant: context.variant ?? variant,
+        }),
+      )}
+      data-size={context.size ?? size}
+      data-slot="toggle-group-item"
+      data-spacing={context.spacing}
+      data-variant={context.variant ?? variant}
+      {...toggleGroupScope}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };

package/src/components/toggle.tsx

@@ -0,0 +1,30 @@
+import { Toggle as TogglePrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import type { ToggleVariants } from "#/variants/toggle";
+import { toggleVariants } from "#/variants/toggle";
+
+/* -----------------------------------------------------------------------------
+ * Component: Toggle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Toggle({ className, size, variant, ...props }: ToggleProps): JSX.Element {
+  return (
+    <TogglePrimitive.Root className={toggleVariants({ className, size, variant })} data-slot="toggle" {...props} />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/tooltip.tsx

@@ -0,0 +1,115 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipProvider
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipProvider({ delayDuration = 0, ...props }: TooltipProviderProps): JSX.Element {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: Tooltip
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Tooltip({ ...props }: TooltipProps): JSX.Element {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipTrigger({ ...props }: TooltipTriggerProps): JSX.Element {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipContent({ children, className, sideOffset = 0, ...props }: TooltipContentProps): JSX.Element {
+  return (
+    <TooltipPrimitive.Portal data-slot="tooltip-portal">
+      <TooltipPrimitive.Content
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background ease-snappy has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:animation-duration-menu-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-menu-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2 data-delayed-open:animate-in data-delayed-open:animation-duration-menu-in data-delayed-open:fade-in-0 data-delayed-open:zoom-in-95 data-delayed-open:data-side-top:slide-in-from-bottom-2 data-delayed-open:data-side-right:slide-in-from-left-2 data-delayed-open:data-side-bottom:slide-in-from-top-2 data-delayed-open:data-side-left:slide-in-from-right-2",
+          className,
+        )}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {children}
+        <TooltipArrow />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipArrow
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element {
+  return (
+    <TooltipPrimitive.Arrow
+      className={cn(
+        "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-foreground fill-foreground",
+        className,
+      )}
+      data-slot="tooltip-arrow"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps };

package/src/css/foundation/base.css

@@ -0,0 +1,50 @@
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border);
+    outline-color: --alpha(var(--color-ring) / 20%);
+  }
+
+  ::-webkit-scrollbar {
+    @apply size-2;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-border;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  html,
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  input {
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      appearance: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+}

package/src/css/foundation/motion.css

@@ -0,0 +1,36 @@
+@theme {
+  /* Enter curves — decelerate into place. */
+  --ease-ui: cubic-bezier(0.32, 0.72, 0, 1); /* large surfaces: dialog, sheet */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot, opt-in */
+  --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1); /* small popups: menu, tooltip */
+  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1); /* continuous layout shifts, fades */
+
+  /* Exit curve — accelerate away; pair with data-closed:. */
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /*
+   * Semantic durations — enter/exit pairs per surface role.
+   * Exit ≈ 60% of enter to offset the slow start of the accelerating exit curve.
+   */
+  --animation-duration-menu-in: 150ms; /* menus, tooltip — instant tools */
+  --animation-duration-menu-out: 100ms;
+  --animation-duration-popup-in: 200ms; /* popover, hover card — content surfaces */
+  --animation-duration-popup-out: 120ms;
+  --animation-duration-overlay-in: 220ms; /* dialog content + backdrop */
+  --animation-duration-overlay-out: 150ms;
+  --animation-duration-panel-in: 320ms; /* sheet, drawer — large sliding panels */
+  --animation-duration-panel-out: 220ms;
+  --animation-duration-expand-in: 200ms; /* accordion, inline disclosure */
+  --animation-duration-expand-out: 150ms;
+
+  --animate-shimmer: shimmer 2.2s linear infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: -200% center;
+    }
+  }
+}

package/src/css/foundation/source.css

@@ -0,0 +1,3 @@
+@import "tw-animate-css";
+
+@source "../../**/*.{ts,tsx}";

package/src/css/foundation/tokens.css

@@ -0,0 +1,71 @@
+:root {
+  --radius: 0.375rem;
+}
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+  --font-mono: var(--font-mono);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --color-code-number: var(--code-number);
+
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+
+  --radius-xs: calc(var(--radius) * 2 / 6);
+  --radius-sm: calc(var(--radius) * 4 / 6);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) * 8 / 6);
+  --radius-xl: calc(var(--radius) * 12 / 6);
+  --radius-2xl: calc(var(--radius) * 16 / 6);
+  --radius-3xl: calc(var(--radius) * 24 / 6);
+  --radius-4xl: calc(var(--radius) * 32 / 6);
+}

package/src/css/foundation/variants.css

@@ -0,0 +1,113 @@
+/*
+ * Custom Tailwind variants for @codefast/ui.
+ *
+ * Shorthand usage (composes with group-, peer-, in-, has- modifiers):
+ *   data-open:           → [data-state="open"] or [data-open]:not([data-open="false"])
+ *   group-data-disabled: → ancestor .group with matching data-disabled
+ *   in-data-side-left:   → ancestor with [data-side="left"]
+ *
+ * Prefer these over verbose arbitrary variants (data-[state=open]:, data-[side=left]:).
+ */
+
+/* -------------------------------------------------------------------------
+ * Theme
+ * ------------------------------------------------------------------------- */
+
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light, .light *)) {
+      @slot;
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------
+ * Layout — orientation & placement (Radix Popper)
+ * ------------------------------------------------------------------------- */
+
+@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
+@custom-variant data-vertical (&:where([data-orientation="vertical"]));
+
+@custom-variant data-side-top (&:where([data-side="top"]));
+@custom-variant data-side-right (&:where([data-side="right"]));
+@custom-variant data-side-bottom (&:where([data-side="bottom"]));
+@custom-variant data-side-left (&:where([data-side="left"]));
+
+/* -------------------------------------------------------------------------
+ * State — boolean & Radix data-state
+ *
+ * Block variants match both Radix data-state="…" and boolean data-* attrs
+ * so components can use one shorthand regardless of attribute source.
+ * ------------------------------------------------------------------------- */
+
+/* Matches Radix data-state="open" and boolean data-open (not "false"). */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+/* data-selected only matches explicit true, not bare data-selected. */
+@custom-variant data-selected {
+  &:where([data-state="selected"]),
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-focused {
+  &:where([data-focused="true"]),
+  &:where([data-focused]:not([data-focused="false"])) {
+    @slot;
+  }
+}
+
+/* -------------------------------------------------------------------------
+ * State — Radix-only (no boolean data-* equivalent)
+ * ------------------------------------------------------------------------- */
+
+@custom-variant data-on (&:where([data-state="on"]));
+@custom-variant data-collapsed (&:where([data-state="collapsed"]));
+@custom-variant data-hidden (&:where([data-state="hidden"]));
+@custom-variant data-visible (&:where([data-state="visible"]));
+@custom-variant data-delayed-open (&:where([data-state="delayed-open"]));