@khanacademy/wonder-blocks-tabs 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-tabs
 
+## 0.1.1
+
+### Patch Changes
+
+- 70fbe23: Update ts config
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/navigation-tab-item.d.ts

@@ -0,0 +1,61 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+type NavigationTabItemLinkProps = {
+    style: StyleType;
+    "aria-current"?: "page";
+};
+/**
+ * A component for a tab item in NavigationTabs. It is used with a Link
+ * component.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {NavigationTab, NavigationTabItem} from "@khanacademy/wonder-blocks-tabs";
+ * import Link from "@khanacademy/wonder-blocks-link";
+ *
+ * <NavigationTabs>
+ *  <NavigationTabItem>
+ *    <Link href="/link-1">Link 1</Link>
+ *  </NavigationTabItem>
+ *  <NavigationTabItem>
+ *    <Link href="/link-2">Link 2</Link>
+ *  </NavigationTabItem>
+ * </NavigationTabs>
+ * ```
+ */
+export declare const NavigationTabItem: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The `Link` to render for the navigation tab item.
+     *
+     * When a `Link` component is passed in for the `children` prop,
+     * `NavigationTabItem` will inject props for the `Link`. For specific use
+     * cases where the `Link` component is wrapped by another component (like a
+     * `Tooltip` or `Popover`), a render function can be used instead. The
+     * render function provides the Link props that should be applied to the
+     * Link component. See example in the docs for more details.
+     */
+    children: React.ReactElement | ((linkProps: NavigationTabItemLinkProps) => React.ReactElement);
+    /**
+     * An id for the root element.
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * If the `NavigationTabItem` is the current page. If `true`, current
+     * styling and aria-current=page will be applied to the Link.
+     */
+    current?: boolean;
+    /**
+     * Custom styles for overriding default styles. For custom link styling,
+     * prefer applying the styles to the `Link` component. Note: The
+     * `NavigationTabItem` will also set styles to the `Link` child component.
+     */
+    style?: StyleType;
+} & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/components/navigation-tabs.d.ts

@@ -0,0 +1,67 @@
+import { StyleType } from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+/**
+ * The `NavigationTabs` component is a tabbed interface for link navigation.
+ * The tabs are links and keyboard users can change tabs using tab.
+ * The `NavigationTabs` component is used with `NavigationTabItem` and `Link`
+ * components. If the tabs should not be links, see the `Tabs` component,
+ * which implements different semantics and keyboard interactions.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * import {NavigationTab, NavigationTabItem} from "@khanacademy/wonder-blocks-tabs";
+ * import Link from "@khanacademy/wonder-blocks-link";
+ *
+ * <NavigationTabs>
+ *  <NavigationTabItem>
+ *    <Link href="/link-1">Link 1</Link>
+ *  </NavigationTabItem>
+ *  <NavigationTabItem>
+ *    <Link href="/link-2">Link 2</Link>
+ *  </NavigationTabItem>
+ * </NavigationTabs>
+ * ```
+ */
+export declare const NavigationTabs: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
+}> & {
+    /**
+     * The NavigationTabItem components to render.
+     */
+    children: React.ReactElement | Array<React.ReactElement>;
+    /**
+     * An id for the navigation element.
+     */
+    id?: string;
+    /**
+     * Optional test ID for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Accessible label for the navigation element.
+     *
+     * It is important to provide a unique aria-label if there are multiple
+     * navigation elements on the page.
+     *
+     * If there is a visual label for the navigation tabs already, use
+     * `aria-labelledby` instead.
+     */
+    "aria-label"?: string;
+    /**
+     * If there is a visual label for the navigation tabs already, set
+     * `aria-labelledby` to the `id` of the element that labels the navigation
+     * tabs.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Custom styles for the elements in NavigationTabs.
+     * - `root`: Styles the root `nav` element.
+     * - `list`: Styles the underlying `ul` element that wraps the
+     * `NavigationTabItem` components
+     */
+    styles?: {
+        root?: StyleType;
+        list?: StyleType;
+    };
+} & React.RefAttributes<HTMLElement>>;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationTabs } from "./components/navigation-tabs";
+export { NavigationTabItem } from "./components/navigation-tab-item";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tabs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "design": "v1",
   "description": "Tabs are used to control what content is shown",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
+    "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-tokens": "5.1.1",
-    "@khanacademy/wonder-blocks-typography": "3.1.3",
-    "@khanacademy/wonder-blocks-core": "12.2.1"
+    "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",