@s-works/s-works-ui 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Vitaly Rtishchev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,2 @@
+Based on Mantine 8.3.18 (MIT), Copyright (c) 2021 Vitaly Rtishchev.
+Team standard styles are generated from Tailwind CSS 4.3.3 (MIT).

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
+# S Works UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+npm 包名：`@s-works/s-works-ui`。接入项目需使用此名称安装依赖，并同步更新组件、Hooks、扩展与 CSS 的 import。
+
+基于 Mantine 8.3.18 的 React 组件、Hooks 与扩展聚合包。保留 root、core、hooks 及扩展入口。`/standard` 提供 Button、Modal、ThreeColumnLayout、TimePicker、Toast 等团队标准组件及其类型。
+
+先在应用最早加载的全局 CSS 中声明层级：
+
+```css
+@layer theme, sw-theme, base, mantine, components, utilities, sw-properties;
+```
+
+再导入组件库样式：
+
+```tsx
+import '@s-works/s-works-ui/styles.layer.css';
+import '@s-works/s-works-ui/tailwind.layer.css';
+```
+
+组件与 `MantineProvider` 从同一包导入。React 和 React DOM 为 peer dependencies，扩展包按需安装其可选 peers。日期组件使用随包安装的 `dayjs`。
+
+```tsx
+import { MantineProvider } from '@s-works/s-works-ui';
+import { Button } from '@s-works/s-works-ui/standard';
+
+export function App() {
+  return <MantineProvider><Button>这是示例button</Button></MantineProvider>;
+}
+```
+
+Button 保留 Mantine 的尺寸、变体、加载、禁用与多态 props。优先使用公开组件 props 和 Style Props 表达设计，剩余差异使用 `classNames`，支持对象和回调并按插槽合并。默认 `sm`；`xs` / `sm` / `md` 在根字号16px、scale=1时高度为24 / 32 / 40px、圆角为4 / 6 / 8px，数值尺寸随 Mantine 缩放，显式 props 优先。
+
+带图标的自有示例使用 `lucide-react` 1.61.0，复制时安装该版本并保留命名导入。ThreeColumnLayout 内置的面板操作使用 Lucide，聚合包将其列为运行依赖；Button 本身通过 `leftSection` / `rightSection` 接收 React 内容，调用方可以使用自己的图标。
+
+团队样式已预编译，使用方无需安装 Tailwind。npm 类名和变量使用 sw 命名空间，不包含 Tailwind Preflight；默认工具类位于 `components.sw` 子层，宿主 utilities 可以显式覆盖。层级顺序需在加载其他样式前声明，宿主全局 CSS 和继承仍遵循正常层叠规则。
+
+保留无 layer 的 `styles.css` / `tailwind.css`，使用这组入口时按普通 CSS 导入顺序控制覆盖，不混用 flat Mantine 和 layered Tailwind。
+
+源码移植使用仓库中无前缀的 `classNames` 与官方 Mantine 8.3.18，由目标项目的 Tailwind 编译，不再导入本包的 Tailwind CSS。
+
+本地构建保留清单中的版本号，不代表已发布更新。许可证与上游来源见 LICENSE 和 NOTICE。

package/cjs/carousel/Carousel.cjs

@@ -0,0 +1,272 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useEmblaCarousel = require('embla-carousel-react');
+var core = require("@s-works/s-works-ui/core");
+var hooks = require("@s-works/s-works-ui/hooks");
+var Carousel_context = require('./Carousel.context.cjs');
+var Carousel_module = require('./Carousel.module.css.cjs');
+var CarouselSlide = require('./CarouselSlide/CarouselSlide.cjs');
+var CarouselVariables = require('./CarouselVariables/CarouselVariables.cjs');
+var getChevronRotation = require('./get-chevron-rotation.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
+
+const defaultProps = {
+  controlSize: 26,
+  controlsOffset: "sm",
+  slideSize: "100%",
+  slideGap: 0,
+  orientation: "horizontal",
+  includeGapInSize: true,
+  initialSlide: 0,
+  withControls: true,
+  withIndicators: false,
+  withKeyboardEvents: true,
+  type: "media"
+};
+const defaultEmblaOptions = {
+  align: "center",
+  loop: false,
+  slidesToScroll: 1,
+  dragFree: false,
+  inViewThreshold: 0,
+  skipSnaps: false,
+  containScroll: "trimSnaps"
+};
+const varsResolver = core.createVarsResolver(
+  (_, { height, controlSize, controlsOffset }) => ({
+    root: {
+      "--carousel-height": core.rem(height),
+      "--carousel-control-size": core.rem(controlSize),
+      "--carousel-controls-offset": core.getSpacing(controlsOffset)
+    }
+  })
+);
+const Carousel = core.factory((_props, ref) => {
+  const props = core.useProps("Carousel", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    children,
+    getEmblaApi,
+    onNextSlide,
+    onPreviousSlide,
+    onSlideChange,
+    nextControlProps,
+    previousControlProps,
+    controlSize,
+    controlsOffset,
+    slideSize,
+    slideGap,
+    orientation,
+    height,
+    includeGapInSize,
+    draggable,
+    initialSlide,
+    withControls,
+    withIndicators,
+    plugins,
+    nextControlIcon,
+    previousControlIcon,
+    withKeyboardEvents,
+    mod,
+    type,
+    emblaOptions,
+    attributes,
+    ...others
+  } = props;
+  const getStyles = core.useStyles({
+    name: "Carousel",
+    classes: Carousel_module,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    attributes,
+    vars,
+    varsResolver
+  });
+  const responsiveClassName = core.useRandomClassName();
+  const { dir } = core.useDirection();
+  const [emblaRefElement, embla] = useEmblaCarousel__default.default(
+    {
+      axis: orientation === "horizontal" ? "x" : "y",
+      direction: orientation === "horizontal" ? dir : void 0,
+      startIndex: initialSlide,
+      ...defaultEmblaOptions,
+      ...emblaOptions
+    },
+    plugins
+  );
+  const [selected, setSelected] = react.useState(0);
+  const [slidesCount, setSlidesCount] = react.useState(0);
+  const handleScroll = react.useCallback((index) => embla && embla.scrollTo(index), [embla]);
+  const handleSelect = react.useCallback(() => {
+    if (!embla) {
+      return;
+    }
+    const slide = embla.selectedScrollSnap();
+    setSelected(slide);
+    slide !== selected && onSlideChange?.(slide);
+  }, [embla, setSelected, onSlideChange, selected]);
+  const handlePrevious = react.useCallback(() => {
+    embla?.scrollPrev();
+    onPreviousSlide?.();
+  }, [embla]);
+  const handleNext = react.useCallback(() => {
+    embla?.scrollNext();
+    onNextSlide?.();
+  }, [embla]);
+  const handleKeydown = react.useCallback(
+    (event) => {
+      if (withKeyboardEvents) {
+        if (event.key === "ArrowRight") {
+          event.preventDefault();
+          handleNext();
+        }
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          handlePrevious();
+        }
+      }
+    },
+    [embla]
+  );
+  react.useEffect(() => {
+    if (embla) {
+      getEmblaApi?.(embla);
+      handleSelect();
+      setSlidesCount(embla.scrollSnapList().length);
+      embla.on("select", handleSelect);
+      return () => {
+        embla.off("select", handleSelect);
+      };
+    }
+    return void 0;
+  }, [embla, emblaOptions?.slidesToScroll, handleSelect]);
+  react.useEffect(() => {
+    if (embla) {
+      embla.reInit();
+      setSlidesCount(embla.scrollSnapList().length);
+      setSelected(
+        (currentSelected) => hooks.clamp(currentSelected, 0, react.Children.toArray(children).length - 1)
+      );
+    }
+  }, [react.Children.toArray(children).length, emblaOptions?.slidesToScroll]);
+  const canScrollPrev = embla?.canScrollPrev() || false;
+  const canScrollNext = embla?.canScrollNext() || false;
+  const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ react.createElement(
+    core.UnstyledButton,
+    {
+      ...getStyles("indicator"),
+      key: index,
+      "data-active": index === selected || void 0,
+      "aria-hidden": true,
+      tabIndex: -1,
+      onClick: () => handleScroll(index),
+      "data-orientation": orientation,
+      onMouseDown: (event) => event.preventDefault()
+    }
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Carousel_context.CarouselProvider, { value: { getStyles, orientation }, children: [
+    type === "container" ? /* @__PURE__ */ jsxRuntime.jsx(CarouselVariables.CarouselContainerVariables, { ...props, selector: `.${responsiveClassName}` }) : /* @__PURE__ */ jsxRuntime.jsx(CarouselVariables.CarouselVariables, { ...props, selector: `.${responsiveClassName}` }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      core.Box,
+      {
+        ref,
+        ...getStyles("root", { className: "responsiveClassName" }),
+        ...others,
+        mod: [{ orientation, "include-gap-in-size": includeGapInSize }, mod],
+        onKeyDownCapture: handleKeydown,
+        children: [
+          withControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("controls"), "data-orientation": orientation, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.UnstyledButton,
+              {
+                ...previousControlProps,
+                ...getStyles("control", {
+                  className: previousControlProps?.className,
+                  style: previousControlProps?.style
+                }),
+                onClick: (event) => {
+                  handlePrevious();
+                  previousControlProps?.onClick?.(event);
+                },
+                "data-inactive": !canScrollPrev || void 0,
+                "data-type": "previous",
+                tabIndex: canScrollPrev ? 0 : -1,
+                children: typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ jsxRuntime.jsx(
+                  core.AccordionChevron,
+                  {
+                    style: {
+                      transform: `rotate(${getChevronRotation.getChevronRotation({
+                        dir,
+                        orientation,
+                        direction: "previous"
+                      })}deg)`
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.UnstyledButton,
+              {
+                ...getStyles("control", {
+                  className: nextControlProps?.className,
+                  style: nextControlProps?.style
+                }),
+                ...nextControlProps,
+                onClick: (event) => {
+                  handleNext();
+                  nextControlProps?.onClick?.(event);
+                },
+                "data-inactive": !canScrollNext || void 0,
+                "data-type": "next",
+                tabIndex: canScrollNext ? 0 : -1,
+                children: typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ jsxRuntime.jsx(
+                  core.AccordionChevron,
+                  {
+                    style: {
+                      transform: `rotate(${getChevronRotation.getChevronRotation({
+                        dir,
+                        orientation,
+                        direction: "next"
+                      })}deg)`
+                    }
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("viewport"), ref: emblaRefElement, "data-type": type, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ...getStyles("container", { className: responsiveClassName }),
+              "data-orientation": orientation,
+              children
+            }
+          ) }),
+          withIndicators && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("indicators"), "data-orientation": orientation, children: indicators })
+        ]
+      }
+    )
+  ] });
+});
+Carousel.classes = Carousel_module;
+Carousel.displayName = "@mantine/carousel/Carousel";
+Carousel.Slide = CarouselSlide.CarouselSlide;
+
+exports.Carousel = Carousel;
+

package/cjs/carousel/Carousel.context.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var core = require("@s-works/s-works-ui/core");
+
+const [CarouselProvider, useCarouselContext] = core.createSafeContext(
+  "Carousel component was not found in tree"
+);
+
+exports.CarouselProvider = CarouselProvider;
+exports.useCarouselContext = useCarouselContext;
+

package/cjs/carousel/Carousel.module.css.cjs

@@ -0,0 +1,7 @@
+'use client';
+'use strict';
+
+var classes = {"root":"m_17884d0f","viewport":"m_a2dae653","container":"m_fcd81474","controls":"m_39bc3463","control":"m_64f58e10","indicators":"m_71ea3ab1","indicator":"m_eae68602","slide":"m_d98df724"};
+
+module.exports = classes;
+

package/cjs/carousel/CarouselSlide/CarouselSlide.cjs

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require("@s-works/s-works-ui/core");
+var Carousel_context = require('../Carousel.context.cjs');
+var Carousel_module = require('../Carousel.module.css.cjs');
+
+const CarouselSlide = core.factory((props, ref) => {
+  const { classNames, className, style, styles, vars, mod, ...others } = core.useProps(
+    "CarouselSlide",
+    null,
+    props
+  );
+  const ctx = Carousel_context.useCarouselContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Box,
+    {
+      ref,
+      mod: [{ orientation: ctx.orientation }, mod],
+      ...ctx.getStyles("slide", { className, style, classNames, styles }),
+      ...others
+    }
+  );
+});
+CarouselSlide.classes = Carousel_module;
+CarouselSlide.displayName = "@mantine/carousel/CarouselSlide";
+
+exports.CarouselSlide = CarouselSlide;
+

package/cjs/carousel/CarouselVariables/CarouselVariables.cjs

@@ -0,0 +1,82 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require("@s-works/s-works-ui/core");
+
+function CarouselVariables({ slideGap, slideSize, selector }) {
+  const theme = core.useMantineTheme();
+  const baseStyles = core.filterProps({
+    "--carousel-slide-gap": core.getSpacing(core.getBaseValue(slideGap)),
+    "--carousel-slide-size": core.rem(core.getBaseValue(slideSize))
+  });
+  const queries = core.keys(theme.breakpoints).reduce(
+    (acc, breakpoint) => {
+      if (!acc[breakpoint]) {
+        acc[breakpoint] = {};
+      }
+      if (typeof slideGap === "object" && slideGap[breakpoint] !== void 0) {
+        acc[breakpoint]["--carousel-slide-gap"] = core.getSpacing(slideGap[breakpoint]);
+      }
+      if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) {
+        acc[breakpoint]["--carousel-slide-size"] = core.getSpacing(slideSize[breakpoint]);
+      }
+      return acc;
+    },
+    {}
+  );
+  const sortedBreakpoints = core.getSortedBreakpoints(core.keys(queries), theme.breakpoints).filter(
+    (breakpoint) => core.keys(queries[breakpoint.value]).length > 0
+  );
+  const media = sortedBreakpoints.map((breakpoint) => ({
+    query: `(min-width: ${theme.breakpoints[breakpoint.value]})`,
+    styles: queries[breakpoint.value]
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(core.InlineStyles, { styles: baseStyles, media, selector });
+}
+function getBreakpoints(values) {
+  if (typeof values === "object" && values !== null) {
+    return core.keys(values);
+  }
+  return [];
+}
+function sortBreakpoints(breakpoints) {
+  return breakpoints.sort((a, b) => core.px(a) - core.px(b));
+}
+function getUniqueBreakpoints({ slideGap, slideSize }) {
+  const breakpoints = Array.from(
+    /* @__PURE__ */ new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])
+  );
+  return sortBreakpoints(breakpoints);
+}
+function CarouselContainerVariables({
+  slideGap,
+  slideSize,
+  selector
+}) {
+  const baseStyles = core.filterProps({
+    "--carousel-slide-gap": core.getSpacing(core.getBaseValue(slideGap)),
+    "--carousel-slide-size": core.rem(core.getBaseValue(slideSize))
+  });
+  const queries = getUniqueBreakpoints({ slideGap, slideSize }).reduce((acc, breakpoint) => {
+    if (!acc[breakpoint]) {
+      acc[breakpoint] = {};
+    }
+    if (typeof slideGap === "object" && slideGap[breakpoint] !== void 0) {
+      acc[breakpoint]["--carousel-slide-gap"] = core.getSpacing(slideGap[breakpoint]);
+    }
+    if (typeof slideSize === "object" && slideSize[breakpoint] !== void 0) {
+      acc[breakpoint]["--carousel-slide-size"] = core.getSpacing(slideSize[breakpoint]);
+    }
+    return acc;
+  }, {});
+  const media = Object.keys(queries).map((breakpoint) => ({
+    query: `carousel (min-width: ${breakpoint})`,
+    styles: queries[breakpoint]
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(core.InlineStyles, { styles: baseStyles, container: media, selector });
+}
+
+exports.CarouselContainerVariables = CarouselContainerVariables;
+exports.CarouselVariables = CarouselVariables;
+

package/cjs/carousel/get-chevron-rotation.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+function getChevronRotation({ dir, orientation, direction }) {
+  if (direction === "previous") {
+    return orientation === "horizontal" ? 90 * (dir === "ltr" ? 1 : -1) : -180;
+  }
+  return orientation === "horizontal" ? 90 * (dir === "ltr" ? -1 : 1) : 0;
+}
+
+exports.getChevronRotation = getChevronRotation;
+

package/cjs/carousel/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var Carousel = require('./Carousel.cjs');
+var CarouselSlide = require('./CarouselSlide/CarouselSlide.cjs');
+
+
+
+exports.Carousel = Carousel.Carousel;
+exports.CarouselSlide = CarouselSlide.CarouselSlide;
+