@vygruppen/spor-react 12.1.0 → 12.1.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @vygruppen/spor-react@12.1.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.1.2 build /home/runner/work/spor/spor/packages/spor-react
 > pnpm typegen && tsup
 
 
-> @vygruppen/spor-react@12.1.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.1.2 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️
@@ -31,12 +31,12 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js     312.69 KB
-CJS dist/index.js.map 620.63 KB
-CJS ⚡️ Build success in 1986ms
-ESM dist/index.mjs     293.19 KB
-ESM dist/index.mjs.map 620.63 KB
-ESM ⚡️ Build success in 1986ms
-DTS ⚡️ Build success in 22070ms
-DTS dist/index.d.ts  134.76 KB
-DTS dist/index.d.mts 134.76 KB
+CJS dist/index.js     313.99 KB
+CJS dist/index.js.map 622.57 KB
+CJS ⚡️ Build success in 1209ms
+ESM dist/index.mjs     294.38 KB
+ESM dist/index.mjs.map 622.57 KB
+ESM ⚡️ Build success in 1794ms
+DTS ⚡️ Build success in 20993ms
+DTS dist/index.d.ts  133.42 KB
+DTS dist/index.d.mts 133.42 KB

package/.turbo/turbo-typegen.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.1.0 typegen /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.1.2 typegen /home/runner/work/spor/spor/packages/spor-react
 > npx @chakra-ui/cli typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 12.1.2
+
+### Patch Changes
+
+- 4b8e4f4: `asChild` support for Button and TextLink #1669
+
+## 12.1.1
+
+### Patch Changes
+
+- Updated dependencies [5e6da7b]
+  - @vygruppen/spor-design-tokens@4.0.5
+
 ## 12.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -317,38 +317,11 @@ type ButtonProps = Exclude<ButtonProps$1, "size" | "variant" | "colorPalette"> &
     loadingText?: React__default.ReactNode;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
 };
-/**
- * Buttons are used to trigger actions.
- *
- * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
- *
- * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
- * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `tertiary`: Used for additional choices, like a less important secondary action.
- * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
- * - `floating`: Used for floating actions, like a menu button in a menu.
- *
- * ```tsx
- * <Button variant="primary" onClick={confirmOrder}>
- *  Buy trip
- * </Button>
- * ```
- *
- * There are also different sizes. You can specify which one you want with the `size` prop. The available sizes are "lg", "md", "sm" and "xs".
- *
- * ```tsx
- * <Button variant="secondary" size="sm" onClick={cancelOrder}>
- *   Cancel trip
- * </Button>
- * ```
- *
- * @see https://spor.vy.no/components/button
- */
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & {
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "secondary" | "tertiary" | "ghost" | "primary" | undefined>;
     size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
@@ -359,7 +332,7 @@ declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & {
     loadingText?: React__default.ReactNode;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
@@ -395,7 +368,7 @@ declare const ClipboardButton: React$1.ForwardRefExoticComponent<_chakra_ui_reac
     loadingText?: React$1.ReactNode;
     leftIcon?: React$1.ReactNode;
     rightIcon?: React$1.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
@@ -2573,15 +2546,6 @@ type LinkProps = Exclude<LinkProps$1, "variant"> & PropsWithChildren<linkVariant
     /** Define if the link shows an icon on the right that indicate it is an external link */
     external?: boolean;
 };
-/** Link to different sites or parts of site
- *
- * You can specify the `variant` prop to get different link designs.
- *  * ```tsx
- * <TextLink href="/url-to-page" variant="primary" size="md">
- *   text that is linked
- * </TextLink>
- * ```
- */
 declare const TextLink: React__default.ForwardRefExoticComponent<LinkProps$1 & {
     variant?: _chakra_ui_react.ConditionalValue<"secondary" | "primary" | undefined>;
 } & {

package/dist/index.d.ts

@@ -317,38 +317,11 @@ type ButtonProps = Exclude<ButtonProps$1, "size" | "variant" | "colorPalette"> &
     loadingText?: React__default.ReactNode;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
 };
-/**
- * Buttons are used to trigger actions.
- *
- * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
- *
- * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
- * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
- * - `tertiary`: Used for additional choices, like a less important secondary action.
- * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
- * - `floating`: Used for floating actions, like a menu button in a menu.
- *
- * ```tsx
- * <Button variant="primary" onClick={confirmOrder}>
- *  Buy trip
- * </Button>
- * ```
- *
- * There are also different sizes. You can specify which one you want with the `size` prop. The available sizes are "lg", "md", "sm" and "xs".
- *
- * ```tsx
- * <Button variant="secondary" size="sm" onClick={cancelOrder}>
- *   Cancel trip
- * </Button>
- * ```
- *
- * @see https://spor.vy.no/components/button
- */
 declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & {
     variant?: _chakra_ui_react.ConditionalValue<"floating" | "secondary" | "tertiary" | "ghost" | "primary" | undefined>;
     size?: _chakra_ui_react.ConditionalValue<"sm" | "md" | "lg" | "xs" | undefined>;
@@ -359,7 +332,7 @@ declare const Button: React__default.ForwardRefExoticComponent<ButtonProps$1 & {
     loadingText?: React__default.ReactNode;
     leftIcon?: React__default.ReactNode;
     rightIcon?: React__default.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
@@ -395,7 +368,7 @@ declare const ClipboardButton: React$1.ForwardRefExoticComponent<_chakra_ui_reac
     loadingText?: React$1.ReactNode;
     leftIcon?: React$1.ReactNode;
     rightIcon?: React$1.ReactNode;
-    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
     size?: "lg" | "md" | "sm" | "xs";
     download?: string;
     href?: string;
@@ -2573,15 +2546,6 @@ type LinkProps = Exclude<LinkProps$1, "variant"> & PropsWithChildren<linkVariant
     /** Define if the link shows an icon on the right that indicate it is an external link */
     external?: boolean;
 };
-/** Link to different sites or parts of site
- *
- * You can specify the `variant` prop to get different link designs.
- *  * ```tsx
- * <TextLink href="/url-to-page" variant="primary" size="md">
- *   text that is linked
- * </TextLink>
- * ```
- */
 declare const TextLink: React__default.ForwardRefExoticComponent<LinkProps$1 & {
     variant?: _chakra_ui_react.ConditionalValue<"secondary" | "primary" | undefined>;
 } & {

package/dist/index.js

@@ -573,22 +573,36 @@ var Skeleton = React67.forwardRef(
 );
 
 // src/button/Button.tsx
+var ButtonContent = ({
+  leftIcon,
+  children,
+  rightIcon
+}) => /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, leftIcon, children, rightIcon && /* @__PURE__ */ React67__namespace.default.createElement(react.Span, { marginLeft: "auto" }, rightIcon));
+var LoadingContent = ({
+  children,
+  loadingText
+}) => /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, /* @__PURE__ */ React67__namespace.default.createElement(react.Flex, { gap: "1", visibility: "hidden" }, children), /* @__PURE__ */ React67__namespace.default.createElement(react.Center, { position: "absolute", inset: "1px 0" }, /* @__PURE__ */ React67__namespace.default.createElement(ColorInlineLoader, { width: "80%", marginX: 2, marginY: 2 }), loadingText && /* @__PURE__ */ React67__namespace.default.createElement(react.Box, null, loadingText)));
 var Button = React67.forwardRef(
-  (props, ref) => {
-    const {
-      loading,
-      disabled,
-      loadingText,
-      variant = "primary",
-      size = "md",
-      leftIcon,
-      rightIcon,
-      type = "button",
-      children,
-      ...rest
-    } = props;
-    const ariaLabel = useCorrectAriaLabel(props);
-    const buttonContent = /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, leftIcon, children, rightIcon && /* @__PURE__ */ React67__namespace.default.createElement(react.Span, { marginLeft: "auto" }, rightIcon));
+  ({
+    loading,
+    disabled,
+    loadingText,
+    variant = "primary",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    type = "button",
+    children,
+    ...rest
+  }, ref) => {
+    const { t } = useTranslation();
+    const ariaLabel = loading ? String(loadingText ?? t(texts2.loadingText)) : rest["aria-label"];
+    const renderContent = () => {
+      const content = rest.asChild ? children.props.children : children;
+      if (loading)
+        return /* @__PURE__ */ React67__namespace.default.createElement(LoadingContent, { size, loadingText }, /* @__PURE__ */ React67__namespace.default.createElement(ButtonContent, { leftIcon, rightIcon }, content));
+      return /* @__PURE__ */ React67__namespace.default.createElement(ButtonContent, { leftIcon, rightIcon }, content);
+    };
     return /* @__PURE__ */ React67__namespace.default.createElement(
       react.Button,
       {
@@ -602,38 +616,12 @@ var Button = React67.forwardRef(
         size,
         ...rest
       },
-      loading ? /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, /* @__PURE__ */ React67__namespace.default.createElement(react.Flex, { gap: "1", visibility: "hidden" }, buttonContent), /* @__PURE__ */ React67__namespace.default.createElement(react.Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React67__namespace.default.createElement(
-        ColorInlineLoader,
-        {
-          maxWidth: getLoaderWidth(size),
-          width: "80%",
-          marginX: 2,
-          marginY: 2
-        }
-      ), loadingText && /* @__PURE__ */ React67__namespace.default.createElement(react.Box, null, loadingText))) : buttonContent
+      rest.asChild ? React67.cloneElement(children, {
+        children: renderContent()
+      }) : renderContent()
     );
   }
 );
-function getLoaderWidth(size) {
-  switch (size) {
-    case "xs":
-      return "4rem";
-    case "sm":
-      return "4rem";
-    case "md":
-      return "5rem";
-    case "lg":
-    default:
-      return "6rem";
-  }
-}
-function useCorrectAriaLabel(props) {
-  const { t } = useTranslation();
-  if (props.loading) {
-    return String(props.loadingText) ?? t(texts2.loadingText);
-  }
-  return props["aria-label"];
-}
 var texts2 = createTexts({
   loadingText: {
     nb: "Laster\u2026",
@@ -4763,14 +4751,29 @@ var getDeviationLevelIcon = ({
       return null;
   }
 };
+var ExternalIcon = ({ label }) => /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, /* @__PURE__ */ React67__namespace.default.createElement(sporIconReact.LinkOutOutline24Icon, { "aria-hidden": true }), /* @__PURE__ */ React67__namespace.default.createElement(react.VisuallyHidden, null, label));
 var TextLink = React67.forwardRef(
-  ({ children, ...props }, ref) => {
-    var _a5;
+  ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const external = props.external !== void 0 ? props.external : Boolean((_a5 = props.href) == null ? void 0 : _a5.match(/^https?:\/\//));
-    return /* @__PURE__ */ React67__namespace.default.createElement(react.Link, { ...props, ref }, children, external && /* @__PURE__ */ React67__namespace.default.createElement(sporIconReact.LinkOutOutline24Icon, { "aria-hidden": true }));
+    const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
+    const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
+    if (props.asChild && React67.isValidElement(children)) {
+      return /* @__PURE__ */ React67__namespace.default.createElement(react.Link, { href, ...props, ref }, React67.cloneElement(children, {
+        ...children.props,
+        children: /* @__PURE__ */ React67__namespace.default.createElement(React67__namespace.default.Fragment, null, children.props.children, isExternal && /* @__PURE__ */ React67__namespace.default.createElement(ExternalIcon, { label: externalLabel }))
+      }));
+    }
+    return /* @__PURE__ */ React67__namespace.default.createElement(react.Link, { href, ...props, ref }, children, isExternal && /* @__PURE__ */ React67__namespace.default.createElement(ExternalIcon, { label: externalLabel }));
   }
 );
+var texts18 = createTexts({
+  externalLink: {
+    nb: "Ekstern lenke",
+    nn: "Ekstern lenke",
+    sv: "Extern l\xE4nk",
+    en: "External link"
+  }
+});
 var List = react.List.Root;
 var ListItem2 = react.List.Item;
 var ListIndicator = react.List.Indicator;
@@ -6222,6 +6225,7 @@ var buttonRecipe = react.defineRecipe({
     transitionDuration: "normal",
     cursor: "pointer",
     textWrap: "wrap",
+    width: "fit-content",
     paddingX: 3,
     paddingY: 1,
     _disabled: {
@@ -6326,6 +6330,10 @@ var buttonRecipe = react.defineRecipe({
         fontWeight: "bold"
       }
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
   }
 });