@seed-design/react 0.0.0-alpha-20260324091316

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -0,0 +1,149 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const selectBox = require('@seed-design/css/recipes/select-box');
+const selectBoxCheckmark = require('@seed-design/css/recipes/selectBoxCheckmark');
+const selectBoxGroup = require('@seed-design/css/recipes/select-box-group');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const reactCollapsible = require('@seed-design/react-collapsible');
+const reactPrimitive = require('@seed-design/react-primitive');
+const clsx = require('clsx');
+const React = require('react');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const Icon = require('../private/Icon.cjs');
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
+const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
+const FooterContext = React.createContext(null);
+const CheckSelectBoxGroup = React.forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup.selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
+);
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = reactCheckbox.useCheckboxContext();
+  const collapsible = reactCollapsible.useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = React.useState(false);
+  const footerRef = React.useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactCollapsible.CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsxRuntime.jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const CheckSelectBoxRoot = React.forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.selectBox.splitVariantProps(props);
+    const classNames = selectBox.selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCheckbox.Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsxRuntime.jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const CheckSelectBoxTrigger = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "trigger"
+);
+const CheckSelectBoxContent = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "content"
+);
+const CheckSelectBoxBody = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "body"
+);
+const CheckSelectBoxLabel = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "label"
+);
+const CheckSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.div), "description");
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } = createSlotRecipeContext.createSlotRecipeContext(selectBoxCheckmark.selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
+const CheckSelectBoxCheckmarkControl = withCheckmarkProvider(reactCheckbox.Checkbox.Control, "root");
+const CheckSelectBoxCheckmarkIcon = withCheckmarkContext(withCheckmarkStateProps(Icon.InternalIcon), "icon");
+const CheckSelectBoxHiddenInput = React.forwardRef((props, ref) => {
+  const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+  const footerContext = React.useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactCheckbox.Checkbox.HiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+const CheckSelectBoxFooter = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = reactCheckbox.useCheckboxContext();
+    const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+    const footerContext = React.useContext(FooterContext);
+    const composedRef = reactComposeRefs.composeRefs(ref, footerContext?.footerRef ?? null);
+    if (collapsibleContext) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactCollapsible.Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";
+
+exports.CheckSelectBoxBody = CheckSelectBoxBody;
+exports.CheckSelectBoxCheckmarkControl = CheckSelectBoxCheckmarkControl;
+exports.CheckSelectBoxCheckmarkIcon = CheckSelectBoxCheckmarkIcon;
+exports.CheckSelectBoxContent = CheckSelectBoxContent;
+exports.CheckSelectBoxDescription = CheckSelectBoxDescription;
+exports.CheckSelectBoxFooter = CheckSelectBoxFooter;
+exports.CheckSelectBoxGroup = CheckSelectBoxGroup;
+exports.CheckSelectBoxHiddenInput = CheckSelectBoxHiddenInput;
+exports.CheckSelectBoxLabel = CheckSelectBoxLabel;
+exports.CheckSelectBoxRoot = CheckSelectBoxRoot;
+exports.CheckSelectBoxTrigger = CheckSelectBoxTrigger;

package/lib/components/SelectBox/CheckSelectBox.d.ts

@@ -0,0 +1,51 @@
+import { SelectBoxVariantProps } from '@seed-design/css/recipes/select-box';
+import { SelectBoxCheckmarkVariantProps } from '@seed-design/css/recipes/selectBoxCheckmark';
+import { SelectBoxGroupVariantProps } from '@seed-design/css/recipes/select-box-group';
+import { Checkbox as CheckboxPrimitive } from '@seed-design/react-checkbox';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { InternalIconProps } from '../private/Icon';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface CheckSelectBoxGroupProps extends SelectBoxGroupVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns in the grid layout. When bigger than 1, child `CheckSelectBoxRoot` will have a default layout of "vertical".
+     * @default 1
+     */
+    columns?: number;
+}
+export declare const CheckSelectBoxGroup: ForwardRefExoticComponent<CheckSelectBoxGroupProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxRootProps extends SelectBoxVariantProps, CheckboxPrimitive.RootProps {
+    /**
+     * Controls when the footer is visible.
+     * @default "when-selected"
+     */
+    footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+export declare const CheckSelectBoxRoot: ForwardRefExoticComponent<CheckSelectBoxRootProps & RefAttributes<HTMLLabelElement>>;
+export interface CheckSelectBoxTriggerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxTrigger: ForwardRefExoticComponent<CheckSelectBoxTriggerProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxContent: ForwardRefExoticComponent<CheckSelectBoxContentProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxBody: ForwardRefExoticComponent<CheckSelectBoxBodyProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxLabel: ForwardRefExoticComponent<CheckSelectBoxLabelProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxDescription: ForwardRefExoticComponent<CheckSelectBoxDescriptionProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxCheckmarkControlProps extends SelectBoxCheckmarkVariantProps, CheckboxPrimitive.ControlProps {
+}
+export declare const CheckSelectBoxCheckmarkControl: ForwardRefExoticComponent<CheckSelectBoxCheckmarkControlProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxCheckmarkIconProps extends InternalIconProps {
+}
+export declare const CheckSelectBoxCheckmarkIcon: ForwardRefExoticComponent<CheckSelectBoxCheckmarkIconProps & RefAttributes<SVGSVGElement>>;
+export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {
+}
+export declare const CheckSelectBoxHiddenInput: ForwardRefExoticComponent<CheckSelectBoxHiddenInputProps & RefAttributes<HTMLInputElement>>;
+export interface CheckSelectBoxFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxFooter: ForwardRefExoticComponent<CheckSelectBoxFooterProps & RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CheckSelectBox.d.ts.map

package/lib/components/SelectBox/CheckSelectBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAOhG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAY9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAYvE,MAAM,WAAW,wBACf,SAAQ,0BAA0B,EAChC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qHAuB/B,CAAC;AA+BF,MAAM,WAAW,uBACf,SAAQ,qBAAqB,EAC3B,iBAAiB,CAAC,SAAS;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,eAAe,GAAG,mBAAmB,GAAG,QAAQ,CAAC;CACrE;AAED,eAAO,MAAM,kBAAkB,sHA0B9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,2HAGS,CAAC;AAMhD,MAAM,WAAW,mCACf,SAAQ,8BAA8B,EACpC,iBAAiB,CAAC,YAAY;CAAG;AAErC,eAAO,MAAM,8BAA8B,gIAGP,CAAC;AAErC,MAAM,WAAW,gCAAiC,SAAQ,iBAAiB;CAAG;AAE9E,eAAO,MAAM,2BAA2B,4HAGQ,CAAC;AAEjD,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,6HAapC,CAAC;AAGH,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,oBAAoB,sHAgChC,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { selectBox } from '@seed-design/css/recipes/select-box';
+import { selectBoxCheckmark } from '@seed-design/css/recipes/selectBoxCheckmark';
+import { selectBoxGroup } from '@seed-design/css/recipes/select-box-group';
+import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
+import { useCollapsibleContext, Collapsible, useCollapsible, CollapsibleProvider } from '@seed-design/react-collapsible';
+import { Primitive } from '@seed-design/react-primitive';
+import clsx from 'clsx';
+import { forwardRef, useContext, createContext, useState, useCallback } from 'react';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { InternalIcon } from '../private/Icon.js';
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext(selectBox);
+const withStateProps = createWithStateProps([useCheckboxContext]);
+const FooterContext = createContext(null);
+const CheckSelectBoxGroup = forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
+);
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = useCheckboxContext();
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const CheckSelectBoxRoot = forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const CheckSelectBoxTrigger = withContext(
+  withStateProps(Primitive.div),
+  "trigger"
+);
+const CheckSelectBoxContent = withContext(
+  withStateProps(Primitive.div),
+  "content"
+);
+const CheckSelectBoxBody = withContext(
+  withStateProps(Primitive.div),
+  "body"
+);
+const CheckSelectBoxLabel = withContext(
+  withStateProps(Primitive.div),
+  "label"
+);
+const CheckSelectBoxDescription = withContext(withStateProps(Primitive.div), "description");
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } = createSlotRecipeContext(selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps([useCheckboxContext]);
+const CheckSelectBoxCheckmarkControl = withCheckmarkProvider(Checkbox.Control, "root");
+const CheckSelectBoxCheckmarkIcon = withCheckmarkContext(withCheckmarkStateProps(InternalIcon), "icon");
+const CheckSelectBoxHiddenInput = forwardRef((props, ref) => {
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsx(Checkbox.HiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+const CheckSelectBoxFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useCheckboxContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+    if (collapsibleContext) {
+      return /* @__PURE__ */ jsx(
+        Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";
+
+export { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxHiddenInput, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger };

package/lib/components/SelectBox/CheckSelectBox.namespace.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const CheckSelectBox = require('./CheckSelectBox.cjs');
+
+
+
+exports.Body = CheckSelectBox.CheckSelectBoxBody;
+exports.CheckmarkControl = CheckSelectBox.CheckSelectBoxCheckmarkControl;
+exports.CheckmarkIcon = CheckSelectBox.CheckSelectBoxCheckmarkIcon;
+exports.Content = CheckSelectBox.CheckSelectBoxContent;
+exports.Description = CheckSelectBox.CheckSelectBoxDescription;
+exports.Footer = CheckSelectBox.CheckSelectBoxFooter;
+exports.Group = CheckSelectBox.CheckSelectBoxGroup;
+exports.HiddenInput = CheckSelectBox.CheckSelectBoxHiddenInput;
+exports.Label = CheckSelectBox.CheckSelectBoxLabel;
+exports.Root = CheckSelectBox.CheckSelectBoxRoot;
+exports.Trigger = CheckSelectBox.CheckSelectBoxTrigger;

package/lib/components/SelectBox/CheckSelectBox.namespace.d.ts

@@ -0,0 +1,2 @@
+export { CheckSelectBoxBody as Body, CheckSelectBoxCheckmarkControl as CheckmarkControl, CheckSelectBoxCheckmarkIcon as CheckmarkIcon, CheckSelectBoxContent as Content, CheckSelectBoxDescription as Description, CheckSelectBoxFooter as Footer, CheckSelectBoxGroup as Group, CheckSelectBoxHiddenInput as HiddenInput, CheckSelectBoxLabel as Label, CheckSelectBoxRoot as Root, CheckSelectBoxTrigger as Trigger, type CheckSelectBoxBodyProps as BodyProps, type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps, type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps, type CheckSelectBoxContentProps as ContentProps, type CheckSelectBoxDescriptionProps as DescriptionProps, type CheckSelectBoxFooterProps as FooterProps, type CheckSelectBoxGroupProps as GroupProps, type CheckSelectBoxHiddenInputProps as HiddenInputProps, type CheckSelectBoxLabelProps as LabelProps, type CheckSelectBoxRootProps as RootProps, type CheckSelectBoxTriggerProps as TriggerProps, } from './CheckSelectBox';
+//# sourceMappingURL=CheckSelectBox.namespace.d.ts.map

package/lib/components/SelectBox/CheckSelectBox.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckSelectBox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,8BAA8B,IAAI,gBAAgB,EAClD,2BAA2B,IAAI,aAAa,EAC5C,qBAAqB,IAAI,OAAO,EAChC,yBAAyB,IAAI,WAAW,EACxC,oBAAoB,IAAI,MAAM,EAC9B,mBAAmB,IAAI,KAAK,EAC5B,yBAAyB,IAAI,WAAW,EACxC,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,qBAAqB,IAAI,OAAO,EAChC,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,mCAAmC,IAAI,qBAAqB,EACjE,KAAK,gCAAgC,IAAI,kBAAkB,EAC3D,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,0BAA0B,IAAI,YAAY,GAChD,MAAM,kBAAkB,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.namespace.js

@@ -0,0 +1 @@
+export { CheckSelectBoxBody as Body, CheckSelectBoxCheckmarkControl as CheckmarkControl, CheckSelectBoxCheckmarkIcon as CheckmarkIcon, CheckSelectBoxContent as Content, CheckSelectBoxDescription as Description, CheckSelectBoxFooter as Footer, CheckSelectBoxGroup as Group, CheckSelectBoxHiddenInput as HiddenInput, CheckSelectBoxLabel as Label, CheckSelectBoxRoot as Root, CheckSelectBoxTrigger as Trigger } from './CheckSelectBox.js';

package/lib/components/SelectBox/RadioSelectBox.cjs

@@ -0,0 +1,141 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const selectBox = require('@seed-design/css/recipes/select-box');
+const selectBoxGroup = require('@seed-design/css/recipes/select-box-group');
+const reactCollapsible = require('@seed-design/react-collapsible');
+const reactPrimitive = require('@seed-design/react-primitive');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+const React = require('react');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const clsx = require('clsx');
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
+const withStateProps = createWithStateProps.createWithStateProps([reactRadioGroup.useRadioGroupItemContext]);
+const FooterContext = React.createContext(null);
+const RadioSelectBoxGroup = React.forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup.selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
+);
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = reactRadioGroup.useRadioGroupItemContext();
+  const collapsible = reactCollapsible.useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = React.useState(false);
+  const footerRef = React.useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactCollapsible.CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsxRuntime.jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const RadioSelectBoxItem = React.forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.selectBox.splitVariantProps(props);
+    const classNames = selectBox.selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactRadioGroup.RadioGroup.Item,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsxRuntime.jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const RadioSelectBoxTrigger = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "trigger"
+);
+const RadioSelectBoxContent = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "content"
+);
+const RadioSelectBoxBody = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "body"
+);
+const RadioSelectBoxLabel = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "label"
+);
+const RadioSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.div), "description");
+const RadioSelectBoxHiddenInput = React.forwardRef((props, ref) => {
+  const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+  const footerContext = React.useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRadioGroup.RadioGroup.ItemHiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+RadioSelectBoxHiddenInput.displayName = "RadioSelectBoxHiddenInput";
+const RadioSelectBoxFooter = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = reactRadioGroup.useRadioGroupItemContext();
+    const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+    const footerContext = React.useContext(FooterContext);
+    const composedRef = reactComposeRefs.composeRefs(ref, footerContext?.footerRef ?? null);
+    if (collapsibleContext) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactCollapsible.Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+RadioSelectBoxFooter.displayName = "RadioSelectBoxFooter";
+
+exports.RadioSelectBoxBody = RadioSelectBoxBody;
+exports.RadioSelectBoxContent = RadioSelectBoxContent;
+exports.RadioSelectBoxDescription = RadioSelectBoxDescription;
+exports.RadioSelectBoxFooter = RadioSelectBoxFooter;
+exports.RadioSelectBoxGroup = RadioSelectBoxGroup;
+exports.RadioSelectBoxHiddenInput = RadioSelectBoxHiddenInput;
+exports.RadioSelectBoxItem = RadioSelectBoxItem;
+exports.RadioSelectBoxLabel = RadioSelectBoxLabel;
+exports.RadioSelectBoxTrigger = RadioSelectBoxTrigger;

package/lib/components/SelectBox/RadioSelectBox.d.ts

@@ -0,0 +1,43 @@
+import { SelectBoxVariantProps } from '@seed-design/css/recipes/select-box';
+import { SelectBoxGroupVariantProps } from '@seed-design/css/recipes/select-box-group';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { RadioGroup as RadioGroupPrimitive } from '@seed-design/react-radio-group';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface RadioSelectBoxGroupProps extends SelectBoxGroupVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns in the grid layout. When bigger than 1, child `RadioSelectBoxItem` will have a default layout of "vertical".
+     * @default 1
+     */
+    columns?: number;
+}
+export declare const RadioSelectBoxGroup: ForwardRefExoticComponent<RadioSelectBoxGroupProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxItemProps extends SelectBoxVariantProps, RadioGroupPrimitive.ItemProps {
+    /**
+     * Controls when the footer is visible.
+     * @default "when-selected"
+     */
+    footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+export declare const RadioSelectBoxItem: ForwardRefExoticComponent<RadioSelectBoxItemProps & RefAttributes<HTMLLabelElement>>;
+export interface RadioSelectBoxTriggerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxTrigger: ForwardRefExoticComponent<RadioSelectBoxTriggerProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxContent: ForwardRefExoticComponent<RadioSelectBoxContentProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxBody: ForwardRefExoticComponent<RadioSelectBoxBodyProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxLabel: ForwardRefExoticComponent<RadioSelectBoxLabelProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxDescription: ForwardRefExoticComponent<RadioSelectBoxDescriptionProps & RefAttributes<HTMLDivElement>>;
+export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {
+}
+export declare const RadioSelectBoxHiddenInput: ForwardRefExoticComponent<RadioSelectBoxHiddenInputProps & RefAttributes<HTMLInputElement>>;
+export interface RadioSelectBoxFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioSelectBoxFooter: ForwardRefExoticComponent<RadioSelectBoxFooterProps & RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=RadioSelectBox.d.ts.map

package/lib/components/SelectBox/RadioSelectBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2CAA2C,CAAC;AAOnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AAwBxC,MAAM,WAAW,wBACf,SAAQ,0BAA0B,EAChC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qHAuB/B,CAAC;AA+BF,MAAM,WAAW,uBACf,SAAQ,qBAAqB,EAC3B,mBAAmB,CAAC,SAAS;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,eAAe,GAAG,mBAAmB,GAAG,QAAQ,CAAC;CACrE;AAED,eAAO,MAAM,kBAAkB,sHA0B9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,2HAGS,CAAC;AAEhD,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,6HAiBpC,CAAC;AAGH,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,oBAAoB,sHAgChC,CAAC"}