@postenbring/hedwig-react 0.0.88 → 0.0.90

package/dist/index.mjs

@@ -1,7 +1,3 @@
-import "./chunk-CSXSUQ2M.mjs";
-import {
-  Text
-} from "./chunk-DMOMTRIY.mjs";
 import "./chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
@@ -18,19 +14,10 @@ import {
   TabsList,
   TabsTab
 } from "./chunk-J5SCUELT.mjs";
-import "./chunk-RC76SXBP.mjs";
-import {
-  Message,
-  MessageDescription,
-  MessageTitle
-} from "./chunk-BHQ46L2O.mjs";
-import "./chunk-FYFJ75NX.mjs";
+import "./chunk-CSXSUQ2M.mjs";
 import {
-  Modal,
-  ModalContent,
-  ModalFooter,
-  ModalHeader
-} from "./chunk-6VKQ6IRG.mjs";
+  Text
+} from "./chunk-DMOMTRIY.mjs";
 import "./chunk-H3E546OT.mjs";
 import {
   Navbar,
@@ -49,6 +36,24 @@ import {
   useNavbarExpendableMenuContext
 } from "./chunk-M7MG7ZQT.mjs";
 import "./chunk-3H7S7C3S.mjs";
+import "./chunk-6QV3OV66.mjs";
+import "./chunk-RC76SXBP.mjs";
+import {
+  Message,
+  MessageDescription,
+  MessageTitle
+} from "./chunk-BHQ46L2O.mjs";
+import "./chunk-FYFJ75NX.mjs";
+import {
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from "./chunk-6VKQ6IRG.mjs";
+import "./chunk-K2CB2NLY.mjs";
+import {
+  Figure
+} from "./chunk-OE6RISJS.mjs";
 import "./chunk-HQVL3ZJ2.mjs";
 import {
   Footer,
@@ -57,7 +62,18 @@ import {
   FooterLinkSections,
   FooterLogo
 } from "./chunk-ROQH67YP.mjs";
+import {
+  LinkList
+} from "./chunk-Z2ZCM4BE.mjs";
+import {
+  OrderedList,
+  UnorderedList
+} from "./chunk-LGEGXOPU.mjs";
 import "./chunk-XFKD6EEJ.mjs";
+import "./chunk-BYEJZSG5.mjs";
+import {
+  Select
+} from "./chunk-6BXKRPR3.mjs";
 import "./chunk-AGZHQDCQ.mjs";
 import {
   Textarea
@@ -74,30 +90,32 @@ import {
   RadioGroup,
   useRadioGroupContext
 } from "./chunk-YS7HBWOI.mjs";
-import "./chunk-BYEJZSG5.mjs";
-import {
-  Select
-} from "./chunk-6BXKRPR3.mjs";
 import "./chunk-YJOOSTJC.mjs";
 import {
   Checkbox
 } from "./chunk-EAFQ3XQU.mjs";
+import "./chunk-LMF3QGSF.mjs";
+import {
+  Fieldset,
+  useFieldsetContext
+} from "./chunk-JQGB77SS.mjs";
 import "./chunk-TDLSHJ4Z.mjs";
 import {
   DatePicker
 } from "./chunk-WUPLEZEY.mjs";
 import "./chunk-Y5SUMFYJ.mjs";
 import "./chunk-5UGT7L7R.mjs";
-import "./chunk-LMF3QGSF.mjs";
-import {
-  Fieldset,
-  useFieldsetContext
-} from "./chunk-JQGB77SS.mjs";
 import "./chunk-NSLSA7F7.mjs";
 import {
   ErrorMessage
 } from "./chunk-CC5QWW52.mjs";
 import "./chunk-BVG5VSZK.mjs";
+import "./chunk-ZQHLYAJU.mjs";
+import {
+  HStack,
+  Stack,
+  VStack
+} from "./chunk-FUIKSOJF.mjs";
 import {
   Container
 } from "./chunk-4QZR2H72.mjs";
@@ -106,24 +124,10 @@ import {
   Grid,
   GridItem
 } from "./chunk-TC5PD4TA.mjs";
-import "./chunk-ZQHLYAJU.mjs";
-import {
-  HStack,
-  Stack,
-  VStack
-} from "./chunk-FUIKSOJF.mjs";
 import "./chunk-XLLYMQLW.mjs";
 import {
   Link
 } from "./chunk-VYS2QNTL.mjs";
-import "./chunk-6QV3OV66.mjs";
-import {
-  LinkList
-} from "./chunk-Z2ZCM4BE.mjs";
-import {
-  OrderedList,
-  UnorderedList
-} from "./chunk-LGEGXOPU.mjs";
 import "./chunk-ISAHCU7C.mjs";
 import {
   Breadcrumbs
@@ -242,6 +246,7 @@ export {
   DescriptionList,
   ErrorMessage,
   Fieldset,
+  Figure,
   Footer,
   FooterButtonLink,
   FooterLinkSection,

package/dist/layout/index.mjs

@@ -1,4 +1,10 @@
 import "../chunk-BVG5VSZK.mjs";
+import "../chunk-ZQHLYAJU.mjs";
+import {
+  HStack,
+  Stack,
+  VStack
+} from "../chunk-FUIKSOJF.mjs";
 import {
   Container
 } from "../chunk-4QZR2H72.mjs";
@@ -7,12 +13,6 @@ import {
   Grid,
   GridItem
 } from "../chunk-TC5PD4TA.mjs";
-import "../chunk-ZQHLYAJU.mjs";
-import {
-  HStack,
-  Stack,
-  VStack
-} from "../chunk-FUIKSOJF.mjs";
 import "../chunk-7ROE6ADK.mjs";
 import "../chunk-NE6W2PCD.mjs";
 import "../chunk-YOSPWY5K.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
-    "@postenbring/hedwig-css": "0.0.73"
+    "@postenbring/hedwig-css": "0.0.75"
   },
   "publishConfig": {
     "access": "public"

package/src/accordion/accordion.stories.tsx

@@ -14,6 +14,7 @@ export default meta;
 type Story = StoryObj<typeof Accordion>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: (
       <>

package/src/badge/badge.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<typeof Badge> = {
 export default meta;
 
 export const Preview: StoryObj<typeof Badge> = {
+  tags: ["!dev"],
   args: {
     variant: "lighter",
     children: "Default badge",

package/src/blockquote/blockquote.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<typeof Blockquote> = {
 export default meta;
 
 export const Preview: StoryObj<typeof Blockquote> = {
+  tags: ["!dev"],
   args: {
     children: (
       <>

package/src/box/box.stories.tsx

@@ -22,6 +22,7 @@ export default meta;
 type Story = StoryObj<typeof Box>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     closeable: false,
     children: (

package/src/breadcrumbs/breadcrumbs.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Breadcrumbs>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: (
       <>

package/src/button/button.stories.tsx

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     variant: "primary",
     children: "Primary button",

package/src/card/card.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof Card>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   render: (props) => (
     <Card {...props} as="div" style={{ maxWidth: "500px", ...props.style }}>
       <Card.Media style={{ width: "100%" }}>

package/src/description-list/description-list.stories.tsx

@@ -12,6 +12,7 @@ const meta: Meta<typeof DescriptionList> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: (
       <>

package/src/figure/figure.stories.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Figure } from ".";
+
+const meta: Meta<typeof Figure> = {
+  title: "Figure",
+  component: Figure,
+};
+
+export default meta;
+
+export const Preview: StoryObj<typeof Figure> = {
+  tags: ["!dev"],
+  args: {
+    children: (
+      <>
+        <img src="https://placedog.net/500/280" alt="A very good dog" />
+        <figcaption>Dogs are the best</figcaption>
+      </>
+    ),
+  },
+};

package/src/figure/figure.tsx

@@ -0,0 +1,36 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface FigureProps extends React.HTMLAttributes<HTMLQuoteElement> {
+  children?: React.ReactNode;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * @example
+ *
+ * ```tsx
+ * <Figure>
+ *   <img src="https://placedog.net/500/280" alt="A very good dog" />
+ *   <figcaption>Dogs are the best</figcaption>
+ * </Figure>
+ * ```
+ */
+export const Figure = forwardRef<HTMLQuoteElement, FigureProps>(
+  ({ children, asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "figure";
+    return (
+      <Component ref={ref} className={clsx("hds-figure", className as undefined)} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+Figure.displayName = "Figure";

package/src/figure/index.tsx

@@ -0,0 +1,3 @@
+export { Figure } from "./figure";
+
+export type * from "./figure";

package/src/form/checkbox/checkbox.stories.tsx

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     title: "",
     children: "Just a checkbox",

package/src/form/date-picker/date-picker.stories.tsx

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     label: "Choose a date",
     errorMessage: "",

package/src/form/error-message/error-message.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof ErrorMessage>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     id: "id",
     children: "This is an error message for use with form input components",

package/src/form/fieldset/fieldset.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Fieldset>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     legend: "Default fieldset",
     errorMessage: "",

package/src/form/input/input.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof Input>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     label: "Some kind of input",
     placeholder: "I am a placeholder",

package/src/form/radio-button/radio-button.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { RadioButton } from "./index";
 
 const meta: Meta<typeof RadioButton> = {
-  title: "Form/RadioButton",
+  title: "Form/Radio button",
   component: RadioButton,
 };
 
@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof RadioButton>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     title: "",
     children: "Just a RadioButton",

package/src/form/radio-button/radio-group.stories.tsx

@@ -4,7 +4,7 @@ import { RadioGroup } from "./radio-group";
 import { RadioButton } from "./index";
 
 const meta: Meta<typeof RadioGroup> = {
-  title: "Form/Radiogroup",
+  title: "Form/Radio group",
   component: RadioGroup,
 };
 
@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof RadioGroup>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     legend: "Radio group with radio buttons",
     errorMessage: "",

package/src/form/select/select.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     label: "Default select",
     errorMessage: "",

package/src/form/textarea/textarea.stories.tsx

@@ -15,6 +15,7 @@ export default meta;
 type Story = StoryObj<typeof Textarea>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     label: "Some kind of textarea",
     placeholder: "I am a placeholder",

package/src/help-text/help-text.stories.tsx

@@ -12,6 +12,7 @@ const meta: Meta<typeof HelpText> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     helpText: `VOEC er en forkortelse for "VAT on E-commerce" (mva. på e-handel).`,
     children: <>VOEC</>,

package/src/index.ts

@@ -6,6 +6,7 @@ export * from "./breadcrumbs";
 export * from "./button";
 export * from "./card";
 export * from "./description-list";
+export * from "./figure";
 export * from "./form";
 export * from "./footer";
 export * from "./help-text";

package/src/layout/container/container.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Container>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   render: (args) => (
     <div style={{ background: "#f8cb9c" }}>
       <Container {...args} style={{ background: "#c1cd8a" }}>

package/src/layout/grid/grid.stories.tsx

@@ -13,6 +13,7 @@ const meta: Meta<typeof Grid> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     gap: "12-16",
     span: { initial: 12, small: 4 },

package/src/layout/stack/stack.stories.tsx

@@ -13,6 +13,7 @@ const meta: Meta<typeof Stack> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     gap: "12-16",
     direction: { initial: "column", small: "row" },

package/src/link/link.stories.tsx

@@ -21,6 +21,7 @@ export default meta;
 type Story = StoryObj<typeof Link>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: "Link",
     href: "https://www.posten.no/",

package/src/list/link-list.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof LinkList>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     size: "medium",
     children: (

package/src/list/list.stories.tsx

@@ -20,6 +20,7 @@ const listItems = (
 );
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: listItems,
   },

package/src/message/message.stories.tsx

@@ -20,6 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof Message>;
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     variant: "success",
     children: (

package/src/modal/modal.stories.tsx

@@ -13,7 +13,8 @@ const meta: Meta<typeof Modal> = {
 export default meta;
 
 type Story = StoryObj<typeof Modal>;
-export const Preview = {
+export const Preview: Story = {
+  tags: ["!dev"],
   render: function Render(args) {
     const modalRef = useRef<HTMLDialogElement>(null);
     const onClose = () => modalRef.current?.close();

package/src/navbar/navbar.stories.tsx

@@ -13,7 +13,8 @@ const meta: Meta<typeof Navbar> = {
 export default meta;
 
 type Story = StoryObj<typeof Navbar>;
-export const Default: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   render: () => (
     <Navbar>
       <Navbar.Logo asChild>

package/src/show-more/show-more.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof ShowMoreButton>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     text: "Vis flere",
     onClick: () => {

package/src/skeleton/skeleton.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Skeleton>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   render: () => (
     <VStack gap="8">
       <Skeleton variant="circle">

package/src/step-indicator/step-indicator.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 type Story = StoryObj<typeof StepIndicator>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     label: "Progress name",
     totalSteps: 5,

package/src/styled-html/styled-html.stories.tsx

@@ -28,6 +28,7 @@ export default meta;
 
 type Story = StoryObj<typeof StyledHtml>;
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: (
       <>

package/src/table/table.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof Table> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     caption: "Default table",
     description: "A short explanation of what this table contains, If you need it.",

package/src/tabs/tabs.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     defaultTab: "first",
     children: (

package/src/text/text.stories.tsx

@@ -12,6 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof Text>;
 export const Preview: Story = {
+  tags: ["!dev"],
   render: () => (
     <VStack gap="16">
       <div>

package/src/warning-banner/warning-banner.stories.tsx

@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof WarningBanner>;
 
 export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     title: "Warning banner title",
     description: