raft-ui 0.0.5 → 0.0.7

package/src/components/textarea/textarea.tsx

@@ -1,136 +0,0 @@
-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";
-
-const textarea = tv({
-  slots: {
-    root: ["block w-full min-h-24 resize-y px-3 py-2 outline-none"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        root: [
-          "border-2 border-line-strong bg-layer-panel font-heading",
-          "shadow-sm focus:shadow-md",
-          "aria-invalid:border-brutal-red aria-invalid:bg-brutal-red/5 aria-invalid:shadow-none aria-invalid:ring-2 aria-invalid:ring-brutal-red/60",
-          "disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none",
-        ],
-      },
-      elegant: {
-        root: [
-          "rounded-md border border-[oklch(0.94_0_0)] bg-layer-field shadow-none",
-          "text-sm text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
-          "placeholder:text-foreground-placeholder/70",
-          "hover:not-aria-invalid:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
-          "focus:border-line-strong/25 focus:bg-layer-field",
-          "focus-visible:ring-2 focus-visible:ring-line-strong/8",
-          "aria-invalid:border-danger-base/45 aria-invalid:hover:border-danger-base/75 aria-invalid:focus-visible:border-danger-base/75 aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-danger-base/12",
-          "disabled:cursor-not-allowed disabled:border-line-subtle/60 disabled:bg-layer-muted/50 disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled",
-          "disabled:hover:border-line-subtle/60 disabled:hover:shadow-none",
-          "aria-invalid:disabled:border-line-subtle/60 aria-invalid:disabled:ring-0",
-        ],
-      },
-    },
-  },
-});
-
-const textareaGroup = tv({
-  slots: {
-    root: ["w-full"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        root: "flex flex-col items-end gap-1",
-      },
-      elegant: {
-        root: [
-          "relative",
-          "has-[>[data-slot=textarea-counter]]:[&>[data-slot=textarea]]:scroll-pb-6",
-          "has-[>[data-slot=textarea-counter]]:[&>[data-slot=textarea]]:pr-16",
-          "[&>[data-slot=textarea-counter]]:pointer-events-none [&>[data-slot=textarea-counter]]:absolute",
-          "[&>[data-slot=textarea-counter]]:right-3 [&>[data-slot=textarea-counter]]:bottom-2.5 [&>[data-slot=textarea-counter]]:z-10",
-        ],
-      },
-    },
-  },
-});
-
-const textareaCounter = tv({
-  slots: {
-    root: ["font-mono text-xs tabular-nums"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        root: [
-          "text-foreground/50",
-          "group-data-[invalid]/field:font-bold group-data-[invalid]/field:text-danger-base",
-        ],
-      },
-      elegant: {
-        root: [
-          "text-[11px] leading-none text-foreground-placeholder/80 transition duration-200 ease-out",
-          "group-data-[invalid]/field:font-medium group-data-[invalid]/field:text-danger-base",
-        ],
-      },
-    },
-    overLimit: {
-      true: {
-        root: "text-danger-base",
-      },
-      false: {
-        root: "",
-      },
-    },
-  },
-  defaultVariants: {
-    overLimit: false,
-  },
-});
-
-export type TextareaProps = WithoutChildren<ComponentPropsWithRef<"textarea">>;
-
-export type TextareaGroupProps = ComponentPropsWithRef<"div">;
-
-export function TextareaGroup({ className, ...props }: TextareaGroupProps) {
-  const theme = useThemeFamily();
-  const { root } = textareaGroup({ theme });
-
-  return <div data-slot="textarea-group" className={root({ className })} {...props} />;
-}
-
-export function Textarea({ className, ...props }: TextareaProps) {
-  const theme = useThemeFamily();
-  const { root } = textarea({ theme });
-
-  return <textarea data-slot="textarea" className={root({ className })} {...props} />;
-}
-
-export interface TextareaCounterProps extends WithoutChildren<ComponentPropsWithRef<"span">> {
-  value?: string;
-  count?: number;
-  limit: number;
-  getLength?: (value: string) => number;
-}
-
-export function TextareaCounter({
-  value,
-  count,
-  limit,
-  getLength,
-  className,
-  ...props
-}: TextareaCounterProps) {
-  const theme = useThemeFamily();
-  const text = value ?? "";
-  const length = count ?? getLength?.(text) ?? text.length;
-  const overLimit = length > limit;
-  const { root } = textareaCounter({ theme, overLimit });
-  return (
-    <span data-slot="textarea-counter" className={root({ className })} {...props}>
-      {length}/{limit}
-    </span>
-  );
-}

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

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

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

@@ -1,111 +0,0 @@
-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";
-
-const toggleGroup = tv({
-  slots: {
-    root: ["inline-flex max-w-full flex-wrap items-center gap-1"],
-    item: [
-      "flex h-7 min-w-0 shrink-0 items-center gap-1 px-2",
-      "text-xs font-bold transition-colors",
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
-    ],
-    label: ["truncate"],
-    count: ["font-mono text-[10px] leading-none"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        item: [
-          "border-2 border-line-strong bg-layer-panel text-foreground-strong",
-          "hover:bg-primary-400/30 data-[pressed]:bg-primary-400 data-[pressed]:text-foreground-strong",
-          "data-[pressed]:shadow-sm data-[disabled]:cursor-not-allowed",
-        ],
-        count: ["text-foreground/40", "group-data-[pressed]/toggle-group-item:text-foreground/60"],
-      },
-      // Elegant styling is deferred; see the component TODO.
-      elegant: {},
-    },
-    disabled: {
-      true: {
-        root: "opacity-50",
-      },
-      false: {
-        root: "",
-      },
-    },
-  },
-  defaultVariants: {
-    disabled: false,
-  },
-});
-
-export type ToggleGroupProps<T extends string = string> = StyledProps<
-  Omit<BaseToggleGroup.Props<T>, "defaultValue" | "multiple" | "onValueChange" | "value">
-> &
-  Omit<VariantProps<typeof toggleGroup>, "theme"> & {
-    value: T;
-    onValueChange: (value: T, eventDetails: BaseToggleGroup.ChangeEventDetails) => void;
-    ariaLabel?: string;
-  };
-
-export function ToggleGroup<T extends string = string>({
-  value,
-  onValueChange,
-  ariaLabel,
-  disabled = false,
-  className,
-  ...props
-}: ToggleGroupProps<T>) {
-  const { root } = toggleGroup({ disabled });
-  return (
-    <BaseToggleGroup
-      value={[value]}
-      onValueChange={(nextValue, eventDetails) => {
-        const selectedValue = nextValue[0];
-        if (selectedValue) onValueChange(selectedValue, eventDetails);
-      }}
-      aria-label={ariaLabel}
-      disabled={disabled}
-      data-slot="toggle-group"
-      className={root({ className })}
-      {...props}
-    />
-  );
-}
-
-export type ToggleGroupItemProps<T extends string = string> = StyledProps<BaseToggle.Props<T>>;
-
-export function ToggleGroupItem<T extends string = string>({
-  className,
-  ...props
-}: ToggleGroupItemProps<T>) {
-  const theme = useThemeFamily();
-  const { item } = toggleGroup({ theme });
-  return (
-    <BaseToggle
-      type="button"
-      data-slot="toggle-group-item"
-      className={item({ className: `group/toggle-group-item ${className ?? ""}`.trim() })}
-      {...props}
-    />
-  );
-}
-
-export type ToggleGroupLabelProps = ComponentPropsWithRef<"span">;
-
-export function ToggleGroupLabel({ className, ...props }: ToggleGroupLabelProps) {
-  const { label } = toggleGroup();
-  return <span data-slot="toggle-group-label" className={label({ className })} {...props} />;
-}
-
-export type ToggleGroupCountProps = ComponentPropsWithRef<"span">;
-
-export function ToggleGroupCount({ className, ...props }: ToggleGroupCountProps) {
-  const theme = useThemeFamily();
-  const { count } = toggleGroup({ theme });
-  return <span data-slot="toggle-group-count" className={count({ className })} {...props} />;
-}

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.tsx

@@ -1,212 +0,0 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import type { ComponentProps } from "react";
-import { tv, type VariantProps } from "../../lib/tv.ts";
-import type { StyledProps } from "../../lib/styled-props.ts";
-import { useThemeFamily } from "../../lib/theme/use-theme.ts";
-
-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-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",
-      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
-      "data-[instant]:transition-none",
-      "[&>svg]:size-3.5 [&>svg]:shrink-0",
-      "has-[[data-slot=kbd]]:py-1.5 has-[[data-slot=kbd]]:pr-1.5",
-      "[&_[data-slot=kbd]]:relative [&_[data-slot=kbd]]:z-10",
-      "[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
-      "[&_[data-slot=kbd]]:text-[10px] [&_[data-slot=kbd]]:font-semibold [&_[data-slot=kbd]]:leading-none",
-    ],
-    arrow: [
-      "pointer-events-none flex",
-      "data-[side=top]:bottom-[-6px]",
-      "data-[side=bottom]:top-[-6px] data-[side=bottom]:rotate-180",
-      "data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
-      "data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
-      "data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
-      "data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90",
-    ],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        content: [
-          "border-2 border-black bg-white",
-          "font-sans font-bold text-black",
-          "shadow-none",
-          "[&_[data-slot=kbd]]:text-black/60",
-        ],
-        arrow: ["hidden"],
-      },
-      elegant: {
-        content: [
-          "rounded-md bg-layer-popover",
-          "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) {
-  return <BaseTooltip.Provider delay={delay} {...props} />;
-}
-
-export type TooltipProps = BaseTooltip.Root.Props;
-
-export function Tooltip(props: TooltipProps) {
-  return <BaseTooltip.Root {...props} />;
-}
-
-export type TooltipTriggerProps = StyledProps<BaseTooltip.Trigger.Props>;
-
-export function TooltipTrigger({ className, ...props }: TooltipTriggerProps) {
-  const theme = useThemeFamily();
-  const { trigger } = tooltip({ theme });
-  return (
-    <BaseTooltip.Trigger
-      data-slot="tooltip-trigger"
-      className={trigger({ className })}
-      {...props}
-    />
-  );
-}
-
-export type TooltipPortalProps = BaseTooltip.Portal.Props;
-
-export function TooltipPortal(props: TooltipPortalProps) {
-  return <BaseTooltip.Portal data-slot="tooltip-portal" {...props} />;
-}
-
-type TooltipArrowProps = StyledProps<BaseTooltip.Arrow.Props> & Pick<TooltipStyleProps, "variant">;
-
-function TooltipArrow({ className, variant, ...props }: TooltipArrowProps) {
-  const theme = useThemeFamily();
-  const { arrow } = tooltip({ theme, variant });
-  return (
-    <BaseTooltip.Arrow data-slot="tooltip-arrow" className={arrow({ className })} {...props}>
-      <TooltipArrowSvg variant={variant} />
-    </BaseTooltip.Arrow>
-  );
-}
-
-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={isInverse ? "fill-foreground-strong" : "fill-layer-popover"}
-      />
-      <path
-        d="M1 0.5L6 5.25L11 0.5"
-        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"
-      />
-    </svg>
-  );
-}
-
-export type TooltipContentProps = StyledProps<BaseTooltip.Popup.Props> &
-  Pick<
-    BaseTooltip.Positioner.Props,
-    | "align"
-    | "alignOffset"
-    | "anchor"
-    | "arrowPadding"
-    | "collisionAvoidance"
-    | "collisionBoundary"
-    | "collisionPadding"
-    | "disableAnchorTracking"
-    | "positionMethod"
-    | "side"
-    | "sideOffset"
-    | "sticky"
-  > & {
-    portalProps?: TooltipPortalProps;
-  } & Pick<TooltipStyleProps, "variant">;
-
-export function TooltipContent({
-  align = "center",
-  alignOffset = 0,
-  anchor,
-  arrowPadding,
-  collisionAvoidance,
-  collisionBoundary,
-  collisionPadding,
-  disableAnchorTracking = false,
-  positionMethod = "fixed",
-  side = "top",
-  sideOffset = 6,
-  sticky,
-  portalProps,
-  variant,
-  className,
-  children,
-  ...props
-}: TooltipContentProps) {
-  const theme = useThemeFamily();
-  const { positioner, content } = tooltip({ theme, variant });
-
-  return (
-    <BaseTooltip.Portal {...portalProps}>
-      <BaseTooltip.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor}
-        arrowPadding={arrowPadding}
-        collisionAvoidance={collisionAvoidance}
-        collisionBoundary={collisionBoundary}
-        collisionPadding={collisionPadding}
-        disableAnchorTracking={disableAnchorTracking}
-        positionMethod={positionMethod}
-        side={side}
-        sideOffset={sideOffset}
-        sticky={sticky}
-        className={positioner()}
-      >
-        <BaseTooltip.Popup
-          data-slot="tooltip-content"
-          className={content({ className })}
-          {...props}
-        >
-          {children}
-          <TooltipArrow variant={variant} />
-        </BaseTooltip.Popup>
-      </BaseTooltip.Positioner>
-    </BaseTooltip.Portal>
-  );
-}