@postenbring/hedwig-react 2.1.3 → 2.2.0

package/src/alert/alert.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef, type HTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Box, type BoxProps } from "../box/box";
+
+export interface AlertTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const AlertTitle = forwardRef<HTMLParagraphElement, AlertTitleProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx("hds-alert__title", className as undefined)} ref={ref} {...rest} />
+    );
+  },
+);
+AlertTitle.displayName = "Alert.Title";
+
+export interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-alert__description", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+AlertDescription.displayName = "Alert.Description";
+
+export type AlertProps = (
+  | {
+      variant?: "info" | "success" | "warning" | "error";
+      icon?: never;
+      iconClassName?: never;
+    }
+  | {
+      variant: "neutral";
+      icon?: React.ReactNode;
+      iconClassName?: string;
+    }
+) &
+  Omit<BoxProps, "variant" | "asChild">;
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ children, className, variant = "success", icon, iconClassName, ...rest }, ref) => {
+    return (
+      <Box
+        className={clsx(`hds-alert`, `hds-alert--${variant}`, className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {variant === "neutral" && (
+          <div className={clsx("hds-alert--neutral__icon", iconClassName as undefined)}>{icon}</div>
+        )}
+        {children}
+      </Box>
+    );
+  },
+) as AlertType;
+Alert.displayName = "Alert";
+
+type AlertType = ReturnType<typeof forwardRef<HTMLDivElement, AlertProps>> & {
+  Title: typeof AlertTitle;
+  Description: typeof AlertDescription;
+};
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;

package/src/alert/index.tsx

@@ -0,0 +1,2 @@
+export { Alert, AlertTitle, AlertDescription } from "./alert";
+export type * from "./alert";

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./accordion";
+export * from "./alert";
 export * from "./badge";
 export * from "./blockquote";
 export * from "./box";

package/src/list/list.tsx

@@ -7,7 +7,7 @@ export interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListEl
    *
    * @default "medium"
    */
-  size?: "small" | "medium" | "large";
+  size?: "default" | "small" | "technical" | "medium" | "large";
 }
 
 /**
@@ -25,11 +25,15 @@ export interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListEl
  * ```
  */
 export const UnorderedList = forwardRef<HTMLUListElement, ListProps>(
-  ({ size = "medium", className, ...rest }, ref) => {
+  ({ size = "default", className, ...rest }, ref) => {
     return (
       <ul
         ref={ref}
-        className={clsx("hds-list", `hds-list--${size}`, className as undefined)}
+        className={clsx(
+          "hds-list",
+          size !== "default" && `hds-list--${size}`,
+          className as undefined,
+        )}
         {...rest}
       />
     );
@@ -56,7 +60,11 @@ export const OrderedList = forwardRef<HTMLOListElement, ListProps>(
     return (
       <ol
         ref={ref}
-        className={clsx("hds-list", `hds-list--${size}`, className as undefined)}
+        className={clsx(
+          "hds-list",
+          size !== "default" && `hds-list--${size}`,
+          className as undefined,
+        )}
         {...rest}
       />
     );

package/dist/chunk-LGEGXOPU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list/list.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\"hds-list\", `hds-list--${size}`, className as undefined)}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\"hds-list\", `hds-list--${size}`, className as undefined)}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,SAAS,YAAY;AA4Bf;AAHC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAAyC,QAAQ;AAAjD,iBAAE,SAAO,UAAU,UA3BtB,IA2BG,IAAiC,iBAAjC,IAAiC,CAA/B,QAAiB;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,aAAa,IAAI,IAAI,SAAsB;AAAA,SACnE;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAgBrB,IAAM,cAAc;AAAA,EACzB,CAAC,IAAyC,QAAQ;AAAjD,iBAAE,SAAO,UAAU,UAtDtB,IAsDG,IAAiC,iBAAjC,IAAiC,CAA/B,QAAiB;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,aAAa,IAAI,IAAI,SAAsB;AAAA,SACnE;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}