@seed-design/react 0.0.0-alpha-20260324091316

package/lib/utils/styled.js

@@ -0,0 +1,344 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { vars } from '@seed-design/css/vars';
+import { forwardRef } from 'react';
+import { isResponsiveObject } from '../types/responsive.js';
+
+function resolveResponsive(varName, value, transform) {
+  if (!isResponsiveObject(value)) {
+    const transformed = transform(value);
+    if (transformed === void 0) return {};
+    return { [`${varName}-base`]: transformed };
+  }
+  const result = {};
+  for (const [breakpoint, breakpointValue] of Object.entries(value)) {
+    if (breakpointValue === void 0) continue;
+    const transformed = transform(breakpointValue);
+    if (transformed === void 0) continue;
+    result[`${varName}-${breakpoint}`] = transformed;
+  }
+  return result;
+}
+function handleColor(color) {
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.$color[type]?.[value] ?? color;
+}
+function handleDimension(dimension) {
+  if (dimension == null) {
+    return void 0;
+  }
+  if (typeof dimension === "number") {
+    return `${dimension}px`;
+  }
+  if (dimension === "full") {
+    return "100%";
+  }
+  const [type, value] = dimension.split(".");
+  return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
+}
+function handleBleed(dimension, direction) {
+  if (dimension === "asPadding") {
+    return `var(--seed-box-padding-${direction})`;
+  }
+  return handleDimension(dimension);
+}
+function handleShadow(shadow) {
+  if (!shadow) {
+    return void 0;
+  }
+  return vars.$shadow[shadow] ?? shadow;
+}
+function handlePaddingWithSafeArea(padding, direction) {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+  const paddingValue = handleDimension(padding);
+  return paddingValue;
+}
+function handleRadius(radius) {
+  if (radius == null) {
+    return void 0;
+  }
+  return vars.$radius[radius] ?? radius;
+}
+function handleGradient(gradientToken, direction) {
+  if (!gradientToken || !direction) {
+    return void 0;
+  }
+  const colorStops = vars.$gradient[gradientToken];
+  if (!colorStops) {
+    return void 0;
+  }
+  return `linear-gradient(${direction}, ${colorStops})`;
+}
+function handleDisplay(display) {
+  if (!display) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (display === "inlineFlex" || display === "inlineBlock") {
+      console.warn(
+        `[SEED Design System] display='${display}' is deprecated and will be removed in @seed-design/react@1.3.0. Use display='${display === "inlineFlex" ? "inline-flex" : "inline-block"}' instead.`
+      );
+    }
+  }
+  return {
+    flex: "flex",
+    grid: "grid",
+    inlineFlex: "inline-flex",
+    // @deprecated Use `inline-flex` instead.
+    inlineBlock: "inline-block",
+    // @deprecated Use `inline-block` instead.
+    none: "none"
+  }[display] ?? display;
+}
+function handleFlexDirection(flexDirection) {
+  if (!flexDirection) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (flexDirection === "rowReverse" || flexDirection === "columnReverse") {
+      console.warn(
+        `[SEED Design System] flexDirection='${flexDirection}' is deprecated and will be removed in @seed-design/react@1.3.0. Use flexDirection='${flexDirection === "rowReverse" ? "row-reverse" : "column-reverse"}' instead.`
+      );
+    }
+  }
+  return {
+    row: "row",
+    column: "column",
+    rowReverse: "row-reverse",
+    // @deprecated Use `row-reverse` instead.
+    columnReverse: "column-reverse"
+    // @deprecated Use `column-reverse` instead.
+  }[flexDirection] ?? flexDirection;
+}
+function handleJustifyContent(justifyContent) {
+  if (!justifyContent) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (justifyContent === "flexStart" || justifyContent === "flexEnd") {
+      console.warn(
+        `[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@1.3.0. Use justifyContent='${justifyContent === "flexStart" ? "flex-start" : "flex-end"}' instead.`
+      );
+    }
+    if (justifyContent === "spaceBetween" || justifyContent === "spaceAround") {
+      console.warn(
+        `[SEED Design System] justifyContent='${justifyContent}' is deprecated and will be removed in @seed-design/react@1.3.0. Use justifyContent='${justifyContent === "spaceBetween" ? "space-between" : "space-around"}' instead.`
+      );
+    }
+  }
+  return {
+    flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
+    flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
+    center: "center",
+    spaceBetween: "space-between",
+    // @deprecated Use `space-between` instead.
+    spaceAround: "space-around"
+    // @deprecated Use `space-around` instead.
+  }[justifyContent] ?? justifyContent;
+}
+function handleAlignItems(alignItems) {
+  if (!alignItems) {
+    return void 0;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (alignItems === "flexStart" || alignItems === "flexEnd") {
+      console.warn(
+        `[SEED Design System] alignItems='${alignItems}' is deprecated and will be removed in @seed-design/react@1.3.0. Use alignItems='${alignItems === "flexStart" ? "flex-start" : "flex-end"}' instead.`
+      );
+    }
+  }
+  return {
+    flexStart: "flex-start",
+    // @deprecated Use `flex-start` instead.
+    flexEnd: "flex-end",
+    // @deprecated Use `flex-end` instead.
+    center: "center",
+    stretch: "stretch"
+  }[alignItems] ?? alignItems;
+}
+function useStyleProps(props) {
+  const {
+    background,
+    bg,
+    bgGradient,
+    backgroundGradient,
+    bgGradientDirection,
+    backgroundGradientDirection,
+    color,
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    boxShadow,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    bleedX,
+    bleedY,
+    bleedTop,
+    bleedRight,
+    bleedBottom,
+    bleedLeft,
+    bottom,
+    left,
+    right,
+    top,
+    display,
+    position,
+    overflowX,
+    overflowY,
+    zIndex,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    justifySelf,
+    alignItems,
+    alignContent,
+    alignSelf,
+    gap,
+    gridColumn,
+    gridRow,
+    unstable_transform,
+    _active,
+    style,
+    ...restProps
+  } = props;
+  const gradientValue = handleGradient(
+    bgGradient ?? backgroundGradient,
+    bgGradientDirection ?? backgroundGradientDirection
+  );
+  return {
+    style: {
+      // Non-responsive props
+      "--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
+      "--seed-box-color": handleColor(color),
+      "--seed-box-border-color": handleColor(borderColor),
+      "--seed-box-border-width": borderWidth !== void 0 ? `${borderWidth}px` : void 0,
+      "--seed-box-border-top-width": borderTopWidth !== void 0 ? `${borderTopWidth}px` : void 0,
+      "--seed-box-border-right-width": borderRightWidth !== void 0 ? `${borderRightWidth}px` : void 0,
+      "--seed-box-border-bottom-width": borderBottomWidth !== void 0 ? `${borderBottomWidth}px` : void 0,
+      "--seed-box-border-left-width": borderLeftWidth !== void 0 ? `${borderLeftWidth}px` : void 0,
+      "--seed-box-border-radius": handleRadius(borderRadius),
+      "--seed-box-border-top-left-radius": handleRadius(borderTopLeftRadius),
+      "--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
+      "--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
+      "--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
+      "--seed-box-box-shadow": handleShadow(boxShadow),
+      "--seed-box-top": top,
+      "--seed-box-left": left,
+      "--seed-box-right": right,
+      "--seed-box-bottom": bottom,
+      "--seed-box-position": position,
+      "--seed-box-overflow-x": overflowX,
+      "--seed-box-overflow-y": overflowY,
+      "--seed-box-z-index": zIndex,
+      "--seed-box-flex-grow": flexGrow === true ? 1 : flexGrow,
+      "--seed-box-flex-shrink": flexShrink === true ? 1 : flexShrink,
+      "--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
+      "--seed-box-justify-content": handleJustifyContent(justifyContent),
+      "--seed-box-justify-self": justifySelf,
+      "--seed-box-align-items": handleAlignItems(alignItems),
+      "--seed-box-align-content": handleAlignItems(alignContent),
+      "--seed-box-align-self": handleAlignItems(alignSelf),
+      "--seed-box-grid-column": gridColumn,
+      "--seed-box-grid-row": gridRow,
+      "--seed-box-unstable-transform": unstable_transform,
+      // Active
+      "--seed-box-background--active": handleColor(_active?.bg ?? _active?.background),
+      // Responsive props (breakpoint-suffixed)
+      ...width !== void 0 && resolveResponsive("--seed-box-width", width, handleDimension),
+      ...minWidth !== void 0 && resolveResponsive("--seed-box-min-width", minWidth, handleDimension),
+      ...maxWidth !== void 0 && resolveResponsive("--seed-box-max-width", maxWidth, handleDimension),
+      ...height !== void 0 && resolveResponsive("--seed-box-height", height, handleDimension),
+      ...minHeight !== void 0 && resolveResponsive("--seed-box-min-height", minHeight, handleDimension),
+      ...maxHeight !== void 0 && resolveResponsive("--seed-box-max-height", maxHeight, handleDimension),
+      ...(padding ?? p) !== void 0 && resolveResponsive("--seed-box-padding", padding ?? p, handleDimension),
+      ...(paddingX ?? px) !== void 0 && resolveResponsive("--seed-box-padding-x", paddingX ?? px, handleDimension),
+      ...(paddingY ?? py) !== void 0 && resolveResponsive("--seed-box-padding-y", paddingY ?? py, handleDimension),
+      ...(paddingTop ?? pt) !== void 0 && resolveResponsive(
+        "--seed-box-padding-top",
+        paddingTop ?? pt,
+        (v) => handlePaddingWithSafeArea(v, "top")
+      ),
+      ...(paddingRight ?? pr) !== void 0 && resolveResponsive("--seed-box-padding-right", paddingRight ?? pr, handleDimension),
+      ...(paddingBottom ?? pb) !== void 0 && resolveResponsive(
+        "--seed-box-padding-bottom",
+        paddingBottom ?? pb,
+        (v) => handlePaddingWithSafeArea(v, "bottom")
+      ),
+      ...(paddingLeft ?? pl) !== void 0 && resolveResponsive("--seed-box-padding-left", paddingLeft ?? pl, handleDimension),
+      ...(bleedTop ?? bleedY) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-top",
+        bleedTop ?? bleedY,
+        (v) => handleBleed(v, "top")
+      ),
+      ...(bleedRight ?? bleedX) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-right",
+        bleedRight ?? bleedX,
+        (v) => handleBleed(v, "right")
+      ),
+      ...(bleedBottom ?? bleedY) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-bottom",
+        bleedBottom ?? bleedY,
+        (v) => handleBleed(v, "bottom")
+      ),
+      ...(bleedLeft ?? bleedX) !== void 0 && resolveResponsive(
+        "--seed-box-bleed-left",
+        bleedLeft ?? bleedX,
+        (v) => handleBleed(v, "left")
+      ),
+      ...gap !== void 0 && resolveResponsive("--seed-box-gap", gap, handleDimension),
+      ...display !== void 0 && resolveResponsive("--seed-box-display", display, handleDisplay),
+      ...flexDirection !== void 0 && resolveResponsive("--seed-box-flex-direction", flexDirection, handleFlexDirection),
+      ...style
+    },
+    restProps: {
+      ...restProps,
+      // see global.ts to understand why we need this
+      ...(_active?.bg != null || _active?.background != null) && { "data-has-active-bg": "" }
+    }
+  };
+}
+function withStyleProps(Component) {
+  const Node = forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    return /* @__PURE__ */ jsx(Component, { ref, style, ...restProps });
+  });
+  Node.displayName = Component.displayName || Component.name;
+  return Node;
+}
+
+export { handleColor, handleDimension, handleRadius, resolveResponsive, useStyleProps, withStyleProps };

package/lib/vars.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vars = require('@seed-design/css/vars');
+
+
+
+Object.keys(vars).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => vars[k]
+	});
+});

package/lib/vars.d.ts

@@ -0,0 +1,2 @@
+export * from '@seed-design/css/vars';
+//# sourceMappingURL=vars.d.ts.map

package/lib/vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vars.d.ts","sourceRoot":"","sources":["../src/vars.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/lib/vars.js

@@ -0,0 +1 @@
+export * from '@seed-design/css/vars';

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@seed-design/react",
+  "version": "0.0.0-alpha-20260324091316",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./primitive": {
+      "types": "./lib/primitive.d.ts",
+      "import": "./lib/primitive.js",
+      "require": "./lib/primitive.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "vite build",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
+    "@radix-ui/react-use-layout-effect": "^1.1.1",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-avatar": "1.0.0",
+    "@seed-design/react-checkbox": "1.0.1",
+    "@seed-design/react-collapsible": "0.1.0",
+    "@seed-design/react-dialog": "1.0.2",
+    "@seed-design/react-drawer": "1.0.9",
+    "@seed-design/react-field": "1.0.1",
+    "@seed-design/react-image": "0.1.1",
+    "@seed-design/react-fieldset": "0.1.0",
+    "@seed-design/react-field-button": "1.0.2",
+    "@seed-design/react-popover": "1.0.3",
+    "@seed-design/react-portal": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/react-progress": "1.0.0",
+    "@seed-design/react-pull-to-refresh": "1.0.1",
+    "@seed-design/react-radio-group": "1.1.0",
+    "@seed-design/react-segmented-control": "1.0.1",
+    "@seed-design/react-slider": "1.0.2",
+    "@seed-design/react-snackbar": "1.0.1",
+    "@seed-design/react-switch": "1.0.1",
+    "@seed-design/react-tabs": "1.0.3",
+    "@seed-design/react-text-field": "1.1.1",
+    "@seed-design/react-toggle": "1.0.1",
+    "clsx": "^2.1.1",
+    "unicode-segmenter": "^0.14.4"
+  },
+  "peerDependencies": {
+    "@seed-design/css": "0.0.0-alpha-20260324091316",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^5.0.0",
+    "ajv": "^8.17.1",
+    "csstype": "^3.1.3",
+    "globby": "^16.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,92 @@
+import {
+  actionButton,
+  type ActionButtonVariantProps,
+} from "@seed-design/css/recipes/action-button";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { handleColor, useStyleProps, type StyleProps } from "../../utils/styled";
+import { IconRequired } from "../Icon/Icon";
+import {
+  PendingButtonProvider,
+  usePendingButton,
+  type UsePendingButtonProps,
+} from "../LoadingIndicator/usePendingButton";
+import {
+  type ScopedColorFg,
+  type ScopedColorPalette,
+  type FontWeight,
+  vars,
+} from "@seed-design/css/vars";
+
+export interface ActionButtonProps
+  extends ActionButtonVariantProps,
+    UsePendingButtonProps,
+    PrimitiveProps,
+    Pick<StyleProps, "flexGrow" | "bleedX" | "bleedY">,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Color of the label and icons inside the button.
+   * Works only when `variant` is `ghost`.
+   * @default "fg.neutral"
+   */
+  color?: ScopedColorFg | ScopedColorPalette;
+
+  /**
+   * Weight of the label.
+   * Works only when `variant` is `ghost`.
+   * @default "bold"
+   */
+  fontWeight?: FontWeight;
+}
+
+export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
+  (
+    {
+      variant,
+      size,
+      loading = false,
+      layout = "withText",
+      color,
+      fontWeight,
+      className,
+      children,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const recipeClassName = actionButton({ variant, layout, size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = useStyleProps(otherProps);
+
+    if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
+      console.warn(
+        "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided.",
+      );
+    }
+
+    return (
+      <PendingButtonProvider value={api}>
+        <IconRequired enabled={layout === "iconOnly"}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(recipeClassName, className)}
+            // NOTE: Should we handle color as a style prop?
+            style={
+              {
+                ...style,
+                ...(color && { "--seed-box-color": handleColor(color) }),
+                ...(fontWeight && { "--seed-font-weight": vars.$fontWeight[fontWeight] }),
+              } as React.CSSProperties
+            }
+            {...api.stateProps}
+            {...restProps}
+          >
+            {children}
+          </Primitive.button>
+        </IconRequired>
+      </PendingButtonProvider>
+    );
+  },
+);
+ActionButton.displayName = "ActionButton";

package/src/components/ActionButton/index.ts

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

package/src/components/ActionChip/ActionChip.tsx

@@ -0,0 +1,34 @@
+import { actionChip, type ActionChipVariantProps } from "@seed-design/css/recipes/action-chip";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { withIconRequired } from "../Icon/Icon";
+
+const { withContext } = createRecipeContext(actionChip);
+
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ActionChip size="medium">Label</ActionChip>
+ *
+ * // After
+ * import { Chip } from "@seed-design/react";
+ * <Chip.Button size="medium" variant="solid">Label</Chip.Button>
+ * ```
+ */
+export interface ActionChipProps
+  extends ActionChipVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ */
+export const ActionChip = withIconRequired(
+  withContext<HTMLButtonElement, ActionChipProps>(Primitive.button),
+  (props: ActionChipProps) => props.layout === "iconOnly",
+);
+ActionChip.displayName = "ActionChip";

package/src/components/ActionChip/index.ts

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

package/src/components/ActionSheet/ActionSheet.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  ActionSheetBackdrop as Backdrop,
+  ActionSheetPositioner as Positioner,
+  ActionSheetContent as Content,
+  ActionSheetHeader as Header,
+  ActionSheetRoot as Root,
+  ActionSheetTitle as Title,
+  ActionSheetDescription as Description,
+  ActionSheetTrigger as Trigger,
+  ActionSheetList as List,
+  ActionSheetItem as Item,
+  ActionSheetCloseButton as CloseButton,
+  type ActionSheetBackdropProps as BackdropProps,
+  type ActionSheetPositionerProps as PositionerProps,
+  type ActionSheetContentProps as ContentProps,
+  type ActionSheetHeaderProps as HeaderProps,
+  type ActionSheetRootProps as RootProps,
+  type ActionSheetTitleProps as TitleProps,
+  type ActionSheetDescriptionProps as DescriptionProps,
+  type ActionSheetTriggerProps as TriggerProps,
+  type ActionSheetListProps as ListProps,
+  type ActionSheetItemProps as ItemProps,
+  type ActionSheetCloseButtonProps as CloseButtonProps,
+} from "./ActionSheet";