@postenbring/hedwig-react - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/button/index.d.ts

@@ -1,37 +0,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
-    /**
-     * The height, font size and padding of the button
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Make the button use 100% width available.
-     * Using the "mobile" it only stretch to full width on smaller screens
-     */
-    fullWidth?: boolean | "mobile";
-    /**
-     * The background of the button.
-     */
-    fill?: "contained" | "outlined";
-    children: React.ReactNode;
-    buttonRef?: React.ForwardedRef<HTMLButtonElement>;
-}
-/**
- * ## TODO
- *
- * - [ ] Handle links that looks like buttons
- * - [ ] Revisit how to handle outline
- * - [ ] Figure out outline-white
- */
-declare function PrimaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace PrimaryButton {
-    var displayName: string;
-}
-declare function SecondaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace SecondaryButton {
-    var displayName: string;
-}
-
-export { PrimaryButton, SecondaryButton };
+export { ButtonProps, PrimaryButton, SecondaryButton } from './button.js';
+import 'react/jsx-runtime';
+import 'react';

dist/button/index.js

@@ -62,2 +62,3 @@ "use strict";
 var import_clsx = require("clsx");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
 
@@ -96,10 +97,9 @@ // src/utils.ts
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
-        [`hds-button--${variant}`]: fill === "contained",
-        [`hds-button--outline-${variant}`]: fill === "outlined",
-        "hds-button--full": fullWidth === true,
-        "hds-button--mobile-full": fullWidth === "mobile"
+      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-button"), (0, import_typed_classname.t)(`hds-button--${size}`), {
+        [(0, import_typed_classname.t)(`hds-button--${variant}`)]: fill === "contained",
+        [(0, import_typed_classname.t)(`hds-button--outline-${variant}`)]: fill === "outlined",
+        [(0, import_typed_classname.t)("hds-button--full")]: fullWidth === true,
+        [(0, import_typed_classname.t)("hds-button--mobile-full")]: fullWidth === "mobile"
       }),
-      ref: buttonRef,
-      type: "button"
+      ref: buttonRef
     }, rest), {
@@ -106,0 +106,0 @@ children

dist/index.d.ts

@@ -1,27 +0,5 @@
-export { PrimaryButton, SecondaryButton } from './button/index.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
-    /**
-     * The visual style of the link
-     */
-    variant?: "underline" | "solid" | "inverted" | "no-underline";
-    /**
-     * Font size of the link
-     */
-    size?: "small" | "medium" | "large";
-    children: React.ReactNode;
-    anchorRef?: React.ForwardedRef<HTMLAnchorElement>;
-}
-/**
- * ## TODO
- *
- * - [ ] Handle button styling
- */
-declare function Link({ children, variant, size, anchorRef, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
-declare namespace Link {
-    var displayName: string;
-}
-
-export { Link };
+export { ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
+export { Link, LinkProps } from './link/link.js';
+export { Badge, BadgeProps, DarkBadge, WarningBadge, WhiteBadge } from './badge/badge.js';
+import 'react/jsx-runtime';
+import 'react';

dist/index.js

@@ -52,15 +52,15 @@ "use strict";
 __export(src_exports, {
+  Badge: () => Badge,
+  DarkBadge: () => DarkBadge,
   Link: () => Link,
   PrimaryButton: () => PrimaryButton,
-  SecondaryButton: () => SecondaryButton
+  SecondaryButton: () => SecondaryButton,
+  WarningBadge: () => WarningBadge,
+  WhiteBadge: () => WhiteBadge
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/button/index.tsx
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
-var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
-
 // src/button/button.tsx
 var import_clsx = require("clsx");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
 
@@ -99,10 +99,9 @@ // src/utils.ts
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)("hds-button", `hds-button--${size}`, {
-        [`hds-button--${variant}`]: fill === "contained",
-        [`hds-button--outline-${variant}`]: fill === "outlined",
-        "hds-button--full": fullWidth === true,
-        "hds-button--mobile-full": fullWidth === "mobile"
+      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-button"), (0, import_typed_classname.t)(`hds-button--${size}`), {
+        [(0, import_typed_classname.t)(`hds-button--${variant}`)]: fill === "contained",
+        [(0, import_typed_classname.t)(`hds-button--outline-${variant}`)]: fill === "outlined",
+        [(0, import_typed_classname.t)("hds-button--full")]: fullWidth === true,
+        [(0, import_typed_classname.t)("hds-button--mobile-full")]: fullWidth === "mobile"
       }),
-      ref: buttonRef,
-      type: "button"
+      ref: buttonRef
     }, rest), {
@@ -123,9 +122,5 @@ children
 
-// src/link/index.tsx
-var import_tokens2 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
-var import_base2 = require("@postenbring/hedwig-css/dist/base.css");
-var import_link = require("@postenbring/hedwig-css/dist/link/link.css");
-
 // src/link/link.tsx
 var import_clsx2 = require("clsx");
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -148,6 +143,7 @@ function Link(_a) {
     __spreadProps(__spreadValues({
-      className: (0, import_clsx2.clsx)("hds-link", {
-        [`hds-link--${variant}`]: variant !== "underline",
-        [`hds-link--${size}`]: size !== "medium"
-      }),
+      className: (0, import_clsx2.clsx)(
+        (0, import_typed_classname2.t)("hds-link"),
+        variant !== "underline" && (0, import_typed_classname2.t)(`hds-link--${variant}`),
+        size !== "medium" && (0, import_typed_classname2.t)(`hds-link--${size}`)
+      ),
       ref: anchorRef
@@ -160,7 +156,46 @@ }, rest), {
 Link.displayName = "Link";
+
+// src/badge/badge.tsx
+var import_clsx3 = require("clsx");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function BaseBadge(_a) {
+  var _b = _a, {
+    children,
+    variant,
+    size = "small"
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "variant",
+    "size"
+  ]);
+  warnForStyleOverrides(rest);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_clsx3.clsx)((0, import_typed_classname3.t)("hds-badge"), (0, import_typed_classname3.t)(`hds-badge--${size}`), (0, import_typed_classname3.t)(`hds-badge--${variant}`)), children });
+}
+BaseBadge.displayName = "BaseBadge";
+function Badge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
+}
+Badge.displayName = "Badge";
+function DarkBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "dark" }));
+}
+DarkBadge.displayName = "DarkBadge";
+function WhiteBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "white" }));
+}
+WhiteBadge.displayName = "WhiteBadge";
+function WarningBadge(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "warning" }));
+}
+WarningBadge.displayName = "WarningBadge";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Badge,
+  DarkBadge,
   Link,
   PrimaryButton,
-  SecondaryButton
+  SecondaryButton,
+  WarningBadge,
+  WhiteBadge
 });

package.json

 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./dist/index.js",
@@ -31,3 +31,3 @@ "module": "./dist/index.mjs",
     "@postenbring/hedwig-tokens": "*",
-    "clsx": "2.0.0"
+    "clsx": "^2.0.0"
   },
@@ -34,0 +34,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46057

increased by148.61%

Number of package files

36

increased by260%

Lines of code

1222

increased by152.48%

Dependency changes

• - Removedclsx@2.0.0(transitive)

• Updatedclsx@^2.0.0