@seed-design/react 0.0.1-alpha-20250210081704

package/src/components/Callout/Callout.namespace.ts

@@ -0,0 +1,20 @@
+export {
+  CalloutActionableIcon as ActionableIcon,
+  CalloutDescription as Description,
+  CalloutDismissButton as DismissButton,
+  CalloutDismissIcon as DismissIcon,
+  CalloutIcon as Icon,
+  CalloutLink as Link,
+  CalloutRoot as Root,
+  CalloutTextContent as TextContent,
+  CalloutTitle as Title,
+  type CalloutActionableIconProps as ActionableIconProps,
+  type CalloutDescriptionProps as DescriptionProps,
+  type CalloutDismissButtonProps as DismissButtonProps,
+  type CalloutDismissIconProps as DismissIconProps,
+  type CalloutIconProps as IconProps,
+  type CalloutLinkProps as LinkProps,
+  type CalloutRootProps as RootProps,
+  type CalloutTextContentProps as TextContentProps,
+  type CalloutTitleProps as TitleProps,
+} from "./Callout";

package/src/components/Callout/Callout.tsx

@@ -0,0 +1,101 @@
+import clsx from "clsx";
+import * as React from "react";
+
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { callout, type CalloutVariantProps } from "@seed-design/recipe/callout";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { Icon, type IconProps } from "../private/Icon";
+import {
+  DismissibleDismissButton,
+  DismissibleRoot,
+  type DismissibleRootProps,
+} from "../private/useDismissible";
+
+const { withContext, withProvider, useClassNames } = createStyleContext(callout);
+
+export interface CalloutRootProps extends CalloutVariantProps, DismissibleRootProps {}
+
+export const CalloutRoot = withProvider<HTMLDivElement, CalloutRootProps>(DismissibleRoot, "root");
+
+export interface CalloutIconProps extends IconProps {}
+
+export const CalloutIcon = withContext<SVGSVGElement, CalloutIconProps>(Icon, "icon");
+
+export interface CalloutTextContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CalloutTextContent = withContext<HTMLDivElement, CalloutTextContentProps>(
+  Primitive.div,
+  "textContent",
+);
+
+export interface CalloutTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const CalloutTitle = React.forwardRef<HTMLSpanElement, CalloutTitleProps>(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+
+    return (
+      <>
+        <Primitive.span ref={ref} className={clsx(classNames.title, className)} {...otherProps} />
+        <Primitive.span className={classNames.spacer}> </Primitive.span>
+      </>
+    );
+  },
+);
+CalloutTitle.displayName = "CalloutTitle";
+
+export interface CalloutDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const CalloutDescription = withContext<HTMLSpanElement, CalloutDescriptionProps>(
+  Primitive.span,
+  "description",
+);
+
+export interface CalloutLinkProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const CalloutLink = React.forwardRef<HTMLButtonElement, CalloutLinkProps>(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+
+    return (
+      <>
+        <Primitive.span className={classNames.spacer}> </Primitive.span>
+        <Primitive.button
+          ref={ref}
+          className={clsx(classNames.linkLabel, className)}
+          {...otherProps}
+        />
+      </>
+    );
+  },
+);
+CalloutLink.displayName = "CalloutLink";
+
+export interface CalloutDismissButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const CalloutDismissButton = withContext<HTMLButtonElement, CalloutDismissButtonProps>(
+  DismissibleDismissButton,
+  "dismissButton",
+);
+
+export interface CalloutDismissIconProps extends IconProps {}
+
+export const CalloutDismissIcon = withContext<SVGSVGElement, CalloutDismissIconProps>(
+  Icon,
+  "dismissIcon",
+);
+
+export interface CalloutActionableIconProps extends IconProps {}
+
+export const CalloutActionableIcon = withContext<SVGSVGElement, CalloutActionableIconProps>(
+  Icon,
+  "actionableIcon",
+);

package/src/components/Callout/index.ts

@@ -0,0 +1,22 @@
+export {
+  CalloutActionableIcon,
+  CalloutDescription,
+  CalloutDismissButton,
+  CalloutDismissIcon,
+  CalloutIcon,
+  CalloutLink,
+  CalloutRoot,
+  CalloutTextContent,
+  CalloutTitle,
+  type CalloutActionableIconProps,
+  type CalloutDescriptionProps,
+  type CalloutDismissButtonProps,
+  type CalloutDismissIconProps,
+  type CalloutIconProps,
+  type CalloutLinkProps,
+  type CalloutRootProps,
+  type CalloutTextContentProps,
+  type CalloutTitleProps,
+} from "./Callout";
+
+export * as Callout from "./Callout.namespace";

package/src/components/Celcius/Celcius.tsx

@@ -0,0 +1,9 @@
+import type * as React from "react";
+
+export interface CelciusProps {
+  value: number;
+}
+
+export const Celcius: React.FC<CelciusProps> = (props) => {
+  return `${props.value}°C`;
+};

package/src/components/Celcius/index.ts

@@ -0,0 +1,4 @@
+export {
+  Celcius,
+  type CelciusProps,
+} from "./Celcius";

package/src/components/Checkbox/Checkbox.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  CheckboxControl as Control,
+  CheckboxHiddenInput as HiddenInput,
+  CheckboxIndicator as Indicator,
+  CheckboxLabel as Label,
+  CheckboxRoot as Root,
+  type CheckboxControlProps as ControlProps,
+  type CheckboxHiddenInputProps as HiddenInputProps,
+  type CheckboxIndicatorProps as IndicatorProps,
+  type CheckboxLabelProps as LabelProps,
+  type CheckboxRootProps as RootProps,
+} from "./Checkbox";

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,96 @@
+import { mergeProps } from "@seed-design/dom-utils";
+import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { checkbox, type CheckboxVariantProps } from "@seed-design/recipe/checkbox";
+import { forwardRef } from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon } from "../private/Icon";
+
+const { withProvider, withContext, useClassNames } = createStyleContext(checkbox);
+const withStateProps = createWithStateProps([useCheckboxContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxRootProps extends CheckboxVariantProps, CheckboxPrimitive.RootProps {}
+
+export const CheckboxRoot = withProvider<HTMLLabelElement, CheckboxRootProps>(
+  CheckboxPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxControlProps extends CheckboxPrimitive.ControlProps {}
+
+export const CheckboxControl = withContext<HTMLDivElement, CheckboxControlProps>(
+  CheckboxPrimitive.Control,
+  "control",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxIndicatorProps extends React.SVGAttributes<SVGSVGElement> {
+  /**
+   * The icon to display when the checkbox is unchecked.
+   */
+  unchecked?: React.ReactNode;
+
+  /**
+   * The icon to display when the checkbox is checked.
+   */
+  checked: React.ReactNode;
+
+  /**
+   * The icon to display when the checkbox is in an indeterminate state.
+   */
+  indeterminate?: React.ReactNode;
+}
+
+export const CheckboxIndicator = forwardRef<SVGSVGElement, CheckboxIndicatorProps>(
+  (
+    {
+      unchecked: uncheckedSvg,
+      checked: checkedSvg,
+      indeterminate: indeterminateSvg,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const { stateProps, checked, indeterminate } = useCheckboxContext();
+    const classNames = useClassNames();
+
+    const mergedProps = mergeProps(
+      stateProps,
+      { className: classNames.icon },
+      otherProps as React.HTMLAttributes<HTMLElement>,
+    );
+
+    if (indeterminate && !indeterminateSvg) {
+      console.warn(
+        "CheckboxIndicator: the `indeterminate` prop must be provided when the checkbox is in an indeterminate state.",
+      );
+    }
+
+    if (indeterminate) return <Icon ref={ref} svg={indeterminateSvg} {...mergedProps} />;
+    if (checked) return <Icon ref={ref} svg={checkedSvg} {...mergedProps} />;
+    if (uncheckedSvg) return <Icon ref={ref} svg={uncheckedSvg} {...mergedProps} />;
+    return null;
+  },
+);
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const CheckboxLabel = withContext<HTMLDivElement, CheckboxLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {}
+
+export const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;

package/src/components/Checkbox/index.ts

@@ -0,0 +1,14 @@
+export {
+  CheckboxControl,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxRoot,
+  type CheckboxControlProps,
+  type CheckboxHiddenInputProps,
+  type CheckboxIndicatorProps,
+  type CheckboxLabelProps,
+  type CheckboxRootProps,
+} from "./Checkbox";
+
+export * as Checkbox from "./Checkbox.namespace";

package/src/components/ChipTabs/ChipTabs.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  ChipTabsContent as Content,
+  ChipTabsList as List,
+  ChipTabsRoot as Root,
+  ChipTabsCarouselCamera as CarouselCamera,
+  ChipTabsCarousel as Carousel,
+  ChipTabsTrigger as Trigger,
+  ChipTabsTriggerLabel as TriggerLabel,
+  type ChipTabsContentProps as ContentProps,
+  type ChipTabsListProps as ListProps,
+  type ChipTabsRootProps as RootProps,
+  type ChipTabsCarouselCameraProps as CarouselCameraProps,
+  type ChipTabsCarouselProps as CarouselProps,
+  type ChipTabsTriggerLabelProps as TriggerLabelProps,
+  type ChipTabsTriggerProps as TriggerProps,
+} from "./ChipTabs";

package/src/components/ChipTabs/ChipTabs.tsx

@@ -0,0 +1,80 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  Tabs as TabsPrimitive,
+  useTabsContext,
+  useTabsTriggerContext,
+} from "@seed-design/react-tabs";
+import { chipTabs, type ChipTabsVariantProps } from "@seed-design/recipe/chipTabs";
+import type React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withProvider, withContext } = createStyleContext(chipTabs);
+const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
+  strict: false,
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsRootProps extends ChipTabsVariantProps, TabsPrimitive.RootProps {}
+
+export const ChipTabsRoot = withProvider<HTMLDivElement, ChipTabsRootProps>(
+  TabsPrimitive.Root,
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsListProps extends TabsPrimitive.ListProps {}
+
+export const ChipTabsList = withContext<HTMLDivElement, ChipTabsListProps>(
+  TabsPrimitive.List,
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsTriggerProps extends TabsPrimitive.TriggerProps {}
+
+export const ChipTabsTrigger = withContext<HTMLButtonElement, ChipTabsTriggerProps>(
+  TabsPrimitive.Trigger,
+  "trigger",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsTriggerLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ChipTabsTriggerLabel = withContext<HTMLSpanElement, ChipTabsTriggerLabelProps>(
+  withStateProps(Primitive.span),
+  "triggerLabel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsContentProps extends TabsPrimitive.ContentProps {}
+
+export const ChipTabsContent = withContext<HTMLSpanElement, ChipTabsContentProps>(
+  TabsPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsCarouselProps extends TabsPrimitive.CarouselProps {}
+
+export const ChipTabsCarousel = withContext<HTMLDivElement, ChipTabsCarouselProps>(
+  TabsPrimitive.Carousel,
+  "carousel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsCarouselCameraProps extends TabsPrimitive.CarouselCameraProps {}
+
+export const ChipTabsCarouselCamera = withContext<HTMLDivElement, ChipTabsCarouselCameraProps>(
+  TabsPrimitive.CarouselCamera,
+  "carouselCamera",
+);

package/src/components/ChipTabs/index.ts

@@ -0,0 +1,18 @@
+export {
+  ChipTabsContent,
+  ChipTabsList,
+  ChipTabsRoot,
+  ChipTabsCarouselCamera,
+  ChipTabsCarousel,
+  ChipTabsTrigger,
+  ChipTabsTriggerLabel,
+  type ChipTabsContentProps,
+  type ChipTabsListProps,
+  type ChipTabsRootProps,
+  type ChipTabsCarouselCameraProps,
+  type ChipTabsCarouselProps,
+  type ChipTabsTriggerLabelProps,
+  type ChipTabsTriggerProps,
+} from "./ChipTabs";
+
+export * as ChipTabs from "./ChipTabs.namespace";

package/src/components/Columns/Columns.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+
+export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {}
+
+export const Columns = React.forwardRef<HTMLDivElement, ColumnsProps>((props, ref) => {
+  return (
+    <Box
+      ref={ref}
+      display="flex"
+      flexDirection="row"
+      flexWrap="nowrap"
+      justifyContent="flexStart"
+      {...props}
+    />
+  );
+});
+
+export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
+  width?: BoxProps["width"] | "content";
+}
+
+// TODO: do we need fractional width support?
+export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
+  const { width, ...otherProps } = props;
+
+  return (
+    <Box
+      ref={ref}
+      display="flex"
+      flexDirection="column"
+      width={width !== "content" ? "full" : undefined}
+      flexShrink={width ? 0 : undefined}
+      flexGrow={width ? 0 : 1}
+      {...otherProps}
+    />
+  );
+});

package/src/components/Columns/index.ts

@@ -0,0 +1 @@
+export { Columns, Column, type ColumnsProps, type ColumnProps } from "./Columns";

package/src/components/ControlChip/ControlChip.namespace.ts

@@ -0,0 +1,15 @@
+export {
+  ControlChipCount as Count,
+  ControlChipIcon as Icon,
+  ControlChipLabel as Label,
+  ControlChipPrefixIcon as PrefixIcon,
+  ControlChipRoot as Root,
+  ControlChipSuffixIcon as SuffixIcon,
+  type ControlChipCountProps as CountProps,
+  type ControlChipIconProps as IconProps,
+  type ControlChipLabelProps as LabelProps,
+  type ControlChipPrefixIconProps as PrefixIconProps,
+  type ControlChipRootProps as RootProps,
+  type ControlChipRootBaseProps as RootBaseProps,
+  type ControlChipSuffixIconProps as SuffixIconProps,
+} from "./ControlChip";

package/src/components/ControlChip/ControlChip.tsx

@@ -0,0 +1,63 @@
+import { useCheckboxContext } from "@seed-design/react-checkbox";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
+import { controlChip, type ControlChipVariantProps } from "@seed-design/recipe/controlChip";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withProvider, withContext } = createStyleContext(controlChip);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false,
+});
+
+export interface ControlChipRootBaseProps extends PrimitiveProps, ControlChipVariantProps {}
+
+export interface ControlChipRootProps
+  extends ControlChipRootBaseProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const ControlChipRoot = withProvider<HTMLButtonElement, ControlChipRootProps>(
+  Primitive.button,
+  "root",
+);
+
+export interface ControlChipLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ControlChipLabel = withContext<HTMLSpanElement, ControlChipLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+export interface ControlChipPrefixIconProps extends IconProps {}
+
+export const ControlChipPrefixIcon = withContext<SVGSVGElement, ControlChipPrefixIconProps>(
+  withStateProps(Icon),
+  "prefixIcon",
+);
+
+export interface ControlChipSuffixIconProps extends IconProps {}
+
+export const ControlChipSuffixIcon = withContext<SVGSVGElement, ControlChipSuffixIconProps>(
+  withStateProps(Icon),
+  "suffixIcon",
+);
+
+export interface ControlChipIconProps extends IconProps {}
+
+export const ControlChipIcon = withContext<SVGSVGElement, ControlChipIconProps>(
+  withStateProps(Icon),
+  "icon",
+);
+
+export interface ControlChipCountProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ControlChipCount = withContext<HTMLSpanElement, ControlChipCountProps>(
+  withStateProps(Primitive.span),
+  "count",
+);

package/src/components/ControlChip/index.ts

@@ -0,0 +1,17 @@
+export {
+  ControlChipCount,
+  ControlChipIcon,
+  ControlChipLabel,
+  ControlChipPrefixIcon,
+  ControlChipRoot,
+  ControlChipSuffixIcon,
+  type ControlChipCountProps,
+  type ControlChipIconProps,
+  type ControlChipLabelProps,
+  type ControlChipPrefixIconProps,
+  type ControlChipRootBaseProps,
+  type ControlChipRootProps,
+  type ControlChipSuffixIconProps,
+} from "./ControlChip";
+
+export * as ControlChip from "./ControlChip.namespace";

package/src/components/Dialog/Dialog.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  DialogBackdrop as Backdrop,
+  DialogPositioner as Positioner,
+  DialogContent as Content,
+  DialogDescription as Description,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogRoot as Root,
+  DialogTitle as Title,
+  DialogTrigger as Trigger,
+  DialogAction as Action,
+  type DialogBackdropProps as BackdropProps,
+  type DialogPositionerProps as PositionerProps,
+  type DialogContentProps as ContentProps,
+  type DialogDescriptionProps as DescriptionProps,
+  type DialogFooterProps as FooterProps,
+  type DialogHeaderProps as HeaderProps,
+  type DialogRootProps as RootProps,
+  type DialogTitleProps as TitleProps,
+  type DialogTriggerProps as TriggerProps,
+  type DialogActionProps as ActionProps,
+} from "./Dialog";