@canonical/react-components 1.5.0 → 1.7.0

package/dist/esm/components/SideNavigation/SideNavigation.js

@@ -0,0 +1,89 @@
+var _excluded = ["items"],
+  _excluded2 = ["children", "className", "dark", "hasIcons", "items", "linkComponent", "listClassName", "navClassName"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationItem from "./SideNavigationItem";
+import { isReactNode } from "../../utils";
+var generateItem = (item, index, linkComponent, dark) => {
+  if (isReactNode(item)) {
+    return /*#__PURE__*/React.createElement(SideNavigationItem, {
+      key: index
+    }, item);
+  }
+  if ("nonInteractive" in item) {
+    var _item$dark;
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({}, item, {
+      dark: (_item$dark = item.dark) !== null && _item$dark !== void 0 ? _item$dark : dark,
+      key: index
+    }));
+  }
+  if ("children" in item) {
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({
+      key: index
+    }, item));
+  }
+  if ("label" in item) {
+    var _item$component, _item$dark2;
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({
+      component: (_item$component = item.component) !== null && _item$component !== void 0 ? _item$component : linkComponent,
+      dark: (_item$dark2 = item.dark) !== null && _item$dark2 !== void 0 ? _item$dark2 : dark
+    }, item, {
+      key: index
+    }));
+  }
+  return null;
+};
+var generateItems = (groups, listClassName, linkComponent, dark) => {
+  return groups === null || groups === void 0 ? void 0 : groups.filter(Boolean).map((group, g) => {
+    var items;
+    var props = {};
+    if (typeof group === "object" && "items" in group) {
+      var _group = group;
+      ({
+        items
+      } = _group);
+      props = _objectWithoutProperties(_group, _excluded);
+      _group;
+    } else {
+      items = group;
+    }
+    return /*#__PURE__*/React.createElement("ul", _extends({}, props, {
+      className: classNames("p-side-navigation__list", listClassName, "className" in group ? group.className : null),
+      key: g
+    }), items.filter(Boolean).map((item, i) => generateItem(item, i, linkComponent, dark)));
+  });
+};
+var getHasIcons = groups => groups === null || groups === void 0 ? void 0 : groups.some(group => {
+  var _ref;
+  return (_ref = group && "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon);
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for side navigation, used
+ * in the [Vanilla](https://vanillaframework.io/docs/) layouts.
+ */
+var SideNavigation = _ref2 => {
+  var {
+      children,
+      className,
+      dark,
+      hasIcons,
+      items,
+      linkComponent,
+      listClassName,
+      navClassName
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, {
+      "p-side-navigation--icons": hasIcons || getHasIcons(items),
+      "is-dark": dark
+    })
+  }, props), /*#__PURE__*/React.createElement("nav", {
+    className: navClassName
+  }, children !== null && children !== void 0 ? children : generateItems(items, listClassName, linkComponent, dark)));
+};
+export default SideNavigation;

package/dist/esm/components/SideNavigation/SideNavigation.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigation from "./SideNavigation";
+declare const meta: Meta<typeof SideNavigation>;
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+export declare const Default: Story;
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+export declare const CustomContent: Story;

package/dist/esm/components/SideNavigation/SideNavigation.stories.js

@@ -0,0 +1,55 @@
+import React from "react";
+import Badge from "../Badge";
+import SideNavigation from "./SideNavigation";
+var meta = {
+  component: SideNavigation,
+  tags: ["autodocs"]
+};
+export default meta;
+/**
+ * Menu items can be provided as links, text or custom components. To provide attributes to individual menus then each menu can be provided as a object containing an items array: `{ className: "menu-one", items: [...] }`.
+ */
+export var Default = {
+  args: {
+    items: [{
+      className: "menu-one",
+      items: [{
+        icon: "drag",
+        label: "Models",
+        href: "/models",
+        status: /*#__PURE__*/React.createElement(Badge, {
+          value: 9,
+          isNegative: true
+        })
+      }, {
+        icon: "menu",
+        label: "Controllers",
+        nonInteractive: true
+      }, {
+        icon: "user",
+        label: "Permissions",
+        href: "/users"
+      }]
+    }, {
+      className: "menu-two",
+      items: [{
+        icon: "information",
+        label: "Docs",
+        href: "/docs"
+      }, {
+        label: "Logout",
+        href: "/logout"
+      }]
+    }]
+  }
+};
+
+/**
+ * `children` can be provided instead of `items` in cases where custom content
+ * is required.
+ */
+export var CustomContent = {
+  args: {
+    children: /*#__PURE__*/React.createElement("div", null, "Custom menu content.")
+  }
+};

package/dist/esm/components/SideNavigation/SideNavigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SideNavigation/SideNavigationBase/SideNavigationBase.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { PropsWithSpread } from "../../../types";
+import type { ComponentType, ElementType, ReactNode } from "react";
+export type Props<C> = PropsWithSpread<{
+    /**
+     * The component or element to use for the element e.g. `span` or `NavLink`.
+     */
+    component: ElementType | ComponentType<C>;
+    /**
+     * Whether to use the dark theme.
+     */
+    dark?: boolean;
+    /**
+     * The navigation item's icon.
+     */
+    icon?: string;
+    /**
+     * The navigation item's label.
+     */
+    label: ReactNode;
+    /**
+     * The navigation item's status.
+     */
+    status?: ReactNode;
+    /**
+     * A ref to pass to the element.
+     */
+    forwardRef?: React.Ref<C> | null;
+}, C>;
+declare const SideNavigationBase: <C>({ component: Component, dark, icon, label, status, forwardRef, ...props }: Props<C>) => React.JSX.Element;
+export default SideNavigationBase;

package/dist/esm/components/SideNavigation/SideNavigationBase/SideNavigationBase.js

@@ -0,0 +1,31 @@
+var _excluded = ["component", "dark", "icon", "label", "status", "forwardRef"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import Icon from "../../Icon";
+var SideNavigationBase = _ref => {
+  var {
+      component: Component,
+      dark,
+      icon,
+      label,
+      status,
+      forwardRef
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: forwardRef
+  }, props), icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    light: dark,
+    className: "p-side-navigation__icon"
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "p-side-navigation__label"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-side-navigation__label"
+  }, label)), status ? /*#__PURE__*/React.createElement("div", {
+    className: "p-side-navigation__status"
+  }, status) : null);
+};
+export default SideNavigationBase;

package/dist/esm/components/SideNavigation/SideNavigationBase/SideNavigationBase.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SideNavigation/SideNavigationBase/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationBaseProps, } from "./SideNavigationBase";

package/dist/esm/components/SideNavigation/SideNavigationBase/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationBase";

package/dist/esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { HTMLProps, PropsWithChildren } from "react";
+import type { SideNavigationLinkProps } from "../SideNavigationLink";
+import type { SideNavigationLinkDefaultElement } from "../SideNavigationLink";
+import { SideNavigationTextProps } from "../SideNavigationText";
+type ItemProps = {
+    /**
+     * The item content.
+     */
+    children: NonNullable<PropsWithChildren["children"]>;
+} & HTMLProps<HTMLLIElement>;
+type ContentProps<L = SideNavigationLinkDefaultElement> = SideNavigationLinkProps<L> | (SideNavigationTextProps & {
+    /**
+     * Whether this should be a content-only item.
+     */
+    nonInteractive: true;
+});
+export type Props<L = SideNavigationLinkDefaultElement> = ItemProps | ContentProps<L>;
+declare const SideNavigationItem: <L = SideNavigationLinkDefaultElement>(props: Props<L>) => React.JSX.Element;
+export default SideNavigationItem;

package/dist/esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.js

@@ -0,0 +1,32 @@
+var _excluded = ["nonInteractive"],
+  _excluded2 = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import SideNavigationLink from "../SideNavigationLink";
+import SideNavigationText from "../SideNavigationText";
+var SideNavigationItem = props => {
+  var content;
+  var liProps = {};
+  if ("nonInteractive" in props) {
+    var {
+        nonInteractive: _
+      } = props,
+      textProps = _objectWithoutProperties(props, _excluded);
+    content = /*#__PURE__*/React.createElement(SideNavigationText, textProps);
+  } else if (!("children" in props)) {
+    content = /*#__PURE__*/React.createElement(SideNavigationLink, props);
+  } else {
+    var _props = props;
+    ({
+      children: content
+    } = _props);
+    liProps = _objectWithoutProperties(_props, _excluded2);
+    _props;
+  }
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: "p-side-navigation__item"
+  }, liProps), content);
+};
+export default SideNavigationItem;

package/dist/esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationItem from "./SideNavigationItem";
+declare const meta: Meta<typeof SideNavigationItem>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationItem>;
+export declare const Default: Story;
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+export declare const Links: Story;
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+export declare const Text: Story;
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+export declare const CustomContent: Story;

package/dist/esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.js

@@ -0,0 +1,63 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import SideNavigation from "../SideNavigation";
+import SideNavigationItem from "./SideNavigationItem";
+import SideNavigationText from "../SideNavigationText";
+var meta = {
+  component: SideNavigationItem,
+  render: args => /*#__PURE__*/React.createElement(SideNavigation, {
+    dark: false,
+    items: [{
+      items: [/*#__PURE__*/React.createElement(SideNavigationItem, _extends({
+        key: "item"
+      }, args, {
+        dark: false
+      }))]
+    }]
+  }),
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+export var Links = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+export var Text = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    nonInteractive: true
+  }
+};
+
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+export var CustomContent = {
+  args: {
+    className: "custom-class",
+    children: /*#__PURE__*/React.createElement(SideNavigationText, null, "This item has been given a custom class")
+  }
+};

package/dist/esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SideNavigation/SideNavigationItem/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationItemProps, } from "./SideNavigationItem";

package/dist/esm/components/SideNavigation/SideNavigationItem/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationItem";

package/dist/esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+import { PropsWithSpread } from "../../../types";
+export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
+export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = PropsWithSpread<{
+    /**
+     * The component or element to use for the link element e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: SideNavigationBaseProps<L>["component"];
+    /**
+     * A ref to pass to the link element.
+     */
+    forwardRef?: React.Ref<E> | null;
+}, Omit<SideNavigationBaseProps<L>, "component">>;
+declare const SideNavigationLink: <L = LinkDefaultElement, E = HTMLAnchorElement>({ component, forwardRef, ...props }: Props<L, E>) => React.JSX.Element;
+export default SideNavigationLink;

package/dist/esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -0,0 +1,25 @@
+var _excluded = ["component", "forwardRef"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationBase from "../SideNavigationBase";
+var SideNavigationLink = _ref => {
+  var {
+      component,
+      forwardRef
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var className = null;
+  if ("className" in props && typeof props.className === "string") {
+    className = props.className;
+    delete props.className;
+  }
+  return /*#__PURE__*/React.createElement(SideNavigationBase, _extends({
+    className: classNames("p-side-navigation__link", className),
+    component: component !== null && component !== void 0 ? component : "a",
+    forwardRef: forwardRef
+  }, props));
+};
+export default SideNavigationLink;

package/dist/esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationLink from "./SideNavigationLink";
+declare const meta: Meta<typeof SideNavigationLink>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationLink>;
+export declare const Default: Story;
+export declare const CustomComponent: Story;

package/dist/esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.js

@@ -0,0 +1,25 @@
+import Badge from "../../Badge";
+import SideNavigationLink from "./SideNavigationLink";
+import React from "react";
+var meta = {
+  component: SideNavigationLink,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    status: /*#__PURE__*/React.createElement(Badge, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};
+export var CustomComponent = {
+  args: {
+    component: props => /*#__PURE__*/React.createElement("button", props),
+    icon: "drag",
+    label: "Models"
+  }
+};

package/dist/esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SideNavigation/SideNavigationLink/index.d.ts

@@ -0,0 +1 @@
+export { default, type LinkDefaultElement as SideNavigationLinkDefaultElement, type Props as SideNavigationLinkProps, } from "./SideNavigationLink";

package/dist/esm/components/SideNavigation/SideNavigationLink/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationLink";

package/dist/esm/components/SideNavigation/SideNavigationText/SideNavigationText.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+export type TextDefaultElement = HTMLProps<HTMLSpanElement>;
+export type Props = Omit<SideNavigationBaseProps<TextDefaultElement>, "component" | "label">;
+declare const SideNavigationText: ({ children, className, ...props }: Props) => React.JSX.Element;
+export default SideNavigationText;

package/dist/esm/components/SideNavigation/SideNavigationText/SideNavigationText.js

@@ -0,0 +1,20 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationBase from "../SideNavigationBase";
+var SideNavigationText = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(SideNavigationBase, _extends({
+    className: classNames("p-side-navigation__text", className),
+    component: "span",
+    label: children
+  }, props));
+};
+export default SideNavigationText;

package/dist/esm/components/SideNavigation/SideNavigationText/SideNavigationText.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationText from "./SideNavigationText";
+declare const meta: Meta<typeof SideNavigationText>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationText>;
+export declare const Default: Story;

package/dist/esm/components/SideNavigation/SideNavigationText/SideNavigationText.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Badge from "../../Badge";
+import SideNavigationText from "./SideNavigationText";
+var meta = {
+  component: SideNavigationText,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    icon: "drag",
+    children: "Models",
+    status: /*#__PURE__*/React.createElement(Badge, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};

package/dist/esm/components/SideNavigation/SideNavigationText/SideNavigationText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SideNavigation/SideNavigationText/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationTextProps, } from "./SideNavigationText";

package/dist/esm/components/SideNavigation/SideNavigationText/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationText";

package/dist/esm/components/SideNavigation/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./SideNavigation";
+export type { Props as SideNavigationProps } from "./SideNavigation";
+export { default as SideNavigationItem } from "./SideNavigationItem";
+export { default as SideNavigationText } from "./SideNavigationText";
+export { default as SideNavigationLink, type SideNavigationLinkDefaultElement, } from "./SideNavigationLink";

package/dist/esm/components/SideNavigation/index.js

@@ -0,0 +1,4 @@
+export { default } from "./SideNavigation";
+export { default as SideNavigationItem } from "./SideNavigationItem";
+export { default as SideNavigationText } from "./SideNavigationText";
+export { default as SideNavigationLink } from "./SideNavigationLink";

package/dist/esm/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,12 @@
+import { HTMLProps } from "react";
+export type Props = {
+    /**
+     * Id of the main content area to skip to.
+     */
+    mainId?: string;
+} & HTMLProps<HTMLAnchorElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+export declare const SkipLink: ({ mainId }: Props) => JSX.Element;
+export default SkipLink;

package/dist/esm/components/SkipLink/SkipLink.js

@@ -0,0 +1,18 @@
+import _pt from "prop-types";
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+export var SkipLink = _ref => {
+  var {
+    mainId = "main-content"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("a", {
+    className: "p-link--skip",
+    href: "#".concat(mainId)
+  }, "Skip to main content");
+};
+SkipLink.propTypes = {
+  mainId: _pt.string
+};
+export default SkipLink;

package/dist/esm/components/SkipLink/SkipLink.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SkipLink from "./SkipLink";
+declare const meta: Meta<typeof SkipLink>;
+export default meta;
+type Story = StoryObj<typeof SkipLink>;
+export declare const Default: Story;

package/dist/esm/components/SkipLink/SkipLink.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+import SkipLink from "./SkipLink";
+var meta = {
+  component: SkipLink,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SkipLink, null), /*#__PURE__*/React.createElement("p", null, "Click inside this example box, then hit the \"Tab\" key to make the skip link focused and visible.")),
+  name: "Default"
+};

package/dist/esm/components/SkipLink/SkipLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SkipLink/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SkipLink";
+export type { Props as SkipLinkProps } from "./SkipLink";

package/dist/esm/components/SkipLink/index.js

@@ -0,0 +1 @@
+export { default } from "./SkipLink";