cetec-design-system 0.0.46-0 → 0.0.47

package/README.md

@@ -156,7 +156,12 @@ Packages are published from the repo root with `dist` included in the published
 
 ### Contributing
 
-- **Release Labels**: PRs must have a release label (major, minor, patch, or release) to trigger a release
+- **Workflow trigger**: Every push to `main` runs the release workflow.
+- **Publishing behavior**: A merged change that resolves to a releasable bump publishes a prerelease by default. Add the `release` label to graduate that merge to a stable `latest` release.
+- **Version bump labels**: Use `major`, `minor`, or `patch` to control the semver bump.
+- **Default bump**: If the merged PR has no Auto semver label, Auto defaults the head change to `patch`.
+- **No-release labels**: `internal`, `documentation`, `tests`, and `dependencies` do not publish on their own.
+- **Skip label**: Use `skip-release` to prevent publishing.
 - **Changelog**: Auto-generated based on PR labels and titles
 - **PR Titles**: Must follow our defined format for Auto release automation:
 
@@ -197,12 +202,23 @@ Packages are published from the repo root with `dist` included in the published
 
 ### Release Labels
 
-- `major` - Breaking changes (💥 Breaking Change)
-- `minor` - New features (🚀 Enhancement)
-- `patch` - Bug fixes (🐛 Bug Fix)
-- `skip-release` - No version bump
-- `internal` - Internal changes (🏠 Internal)
-- `documentation` - Documentation updates (📝 Documentation)
+- `major` - Major version bump (💥 Breaking Change)
+- `minor` - Minor version bump (🚀 Enhancement)
+- `patch` - Patch version bump (🐛 Bug Fix)
+- `release` - Graduate the publish from prerelease to stable `latest`
+- `skip-release` - Do not publish a release
+- `internal` - Internal changes only (🏠 Internal)
+- `documentation` - Documentation updates only (📝 Documentation)
+- `tests` - Test-only changes (🧪 Tests)
+- `dependencies` - Dependency updates only (🔩 Dependency Updates)
 - `performance` - Performance improvements (🏎 Performance)
 
+Examples:
+
+- `minor` => prerelease minor
+- `minor` + `release` => stable minor release
+- no Auto semver label => prerelease patch
+- `documentation` only => no publish
+- `skip-release` => no publish
+
 See `.autorc` for the complete configuration.

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { forwardRef, useMemo, createElement, createContext, useState, useEffect, useContext, useRef, useLayoutEffect } from "react";
+import React__default, { forwardRef, useMemo, createElement, createContext, useState, useEffect, useContext, useRef, useLayoutEffect, useCallback } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import { cetecPreset } from "./preset.js";
@@ -2676,6 +2676,31 @@ const Grid = /* @__PURE__ */ forwardRef(function Grid2(props, ref) {
   const mergedProps = { ref, ...styleProps, ...restProps };
   return createElement(styled.div, mergedProps);
 });
+const wrapConfig = {
+  transform(props) {
+    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+    return {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+};
+const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles);
+  return wrapConfig.transform(_styles, patternFns);
+};
+const Wrap = /* @__PURE__ */ forwardRef(function Wrap2(props, ref) {
+  const [patternProps, restProps] = splitProps$1(props, ["gap", "rowGap", "columnGap", "align", "justify"]);
+  const styleProps = getWrapStyle(patternProps);
+  const mergedProps = { ref, ...styleProps, ...restProps };
+  return createElement(styled.div, mergedProps);
+});
 const splitProps = (props) => {
   const [cssProps, otherProps] = splitCssProps(props);
   const { css: cssProp, ...styleProps } = cssProps;
@@ -7298,6 +7323,13 @@ function useInteractions(propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 }
 const ModalContext = createContext(null);
+const useModalContext = () => {
+  const context2 = useContext(ModalContext);
+  if (!context2) {
+    throw new Error("Modal components must be used within a <Modal> provider");
+  }
+  return context2;
+};
 const Modal = (props) => {
   const {
     open,
@@ -7378,6 +7410,45 @@ const Modal = (props) => {
     ) })
   ] }) });
 };
+const ModalHeader = (props) => {
+  const { title, showCloseButton = true, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = modal();
+  const { onClose } = useModalContext();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: "h3",
+        textStyle: "heading.xs",
+        className: classes.title,
+        children: title
+      }
+    ),
+    showCloseButton && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        onClick: onClose,
+        "aria-label": "Close dialog",
+        className: classes.closeButton,
+        iconName: "x"
+      }
+    )
+  ] }) });
+};
+const ModalBody = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = modal();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const ModalFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = modal();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+};
 const ChipGroupContext = createContext(
   null
 );
@@ -7507,6 +7578,92 @@ const Chip = (props) => {
     }
   );
 };
+const ChipGroup = (props) => {
+  const {
+    type,
+    value,
+    onChange,
+    children,
+    label: label2,
+    id,
+    name,
+    gap = "4",
+    className,
+    ...rest
+  } = props;
+  const [stylesClassName, otherProps] = splitProps(rest);
+  const role = type === "single" ? "radiogroup" : "group";
+  const chipRefs = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const chipValuesRef = useRef([]);
+  const registerChip = useCallback(
+    (chipValue, ref) => {
+      chipRefs.current.set(chipValue, ref);
+      if (!chipValuesRef.current.includes(chipValue)) {
+        chipValuesRef.current.push(chipValue);
+      }
+    },
+    []
+  );
+  const unregisterChip = useCallback((chipValue) => {
+    chipRefs.current.delete(chipValue);
+    chipValuesRef.current = chipValuesRef.current.filter(
+      (v) => v !== chipValue
+    );
+  }, []);
+  const focusChip = useCallback(
+    (direction, currentValue) => {
+      var _a;
+      const values = chipValuesRef.current;
+      const currentIndex = values.indexOf(currentValue);
+      if (currentIndex === -1) return;
+      let nextIndex;
+      if (direction === "next") {
+        nextIndex = currentIndex === values.length - 1 ? 0 : currentIndex + 1;
+      } else {
+        nextIndex = currentIndex === 0 ? values.length - 1 : currentIndex - 1;
+      }
+      const nextValue = values[nextIndex];
+      if (nextValue) {
+        const nextRef = chipRefs.current.get(nextValue);
+        (_a = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _a.focus();
+        if (type === "single") {
+          onChange(nextValue);
+        }
+      }
+    },
+    [type, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    ChipGroupContext.Provider,
+    {
+      value: {
+        type,
+        value,
+        onChange,
+        name,
+        registerChip,
+        unregisterChip,
+        focusChip,
+        chipValues: chipValuesRef.current
+      },
+      children: /* @__PURE__ */ jsx(
+        Wrap,
+        {
+          className: cx(stylesClassName, className),
+          role,
+          "aria-label": label2,
+          "aria-labelledby": id ? `${id}-label` : void 0,
+          id,
+          gap,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+};
 const animationStyles = {
   pop: css({
     animationName: "badgePop",
@@ -7595,6 +7752,7 @@ export {
   CheckBox,
   CheckBoxInput,
   Chip,
+  ChipGroup,
   Divider,
   FormField,
   Heading,
@@ -7604,6 +7762,9 @@ export {
   Link,
   Menu,
   Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Pre,
   Radio,
   RadioInput,