@kaizen/components 1.64.14 → 1.66.0

package/src/__future__/Tabs/subcomponents/Tab/index.ts

@@ -0,0 +1 @@
+export * from "./Tab"

package/src/__future__/Tabs/subcomponents/TabList/TabList.module.css

@@ -0,0 +1,8 @@
+.tabList {
+  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  padding: var(--spacing-xs) var(--spacing-md) 0;
+}
+
+.noPadding {
+  padding: 0;
+}

package/src/__future__/Tabs/subcomponents/TabList/TabList.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react"
+import classnames from "classnames"
+import {
+  TabList as RACTabList,
+  TabListProps as RACTabListProps,
+} from "react-aria-components"
+import styles from "./TabList.module.css"
+
+export type TabListProps = {
+  /**
+   * Accessible name for the set of tabs
+   */
+  "aria-label": string
+  /**
+   * Removes the built in padding
+   */
+  noPadding?: boolean
+  children: ReactNode
+} & RACTabListProps<HTMLElement>
+
+/**
+ * Wrapper for the tabs themselves
+ */
+export const TabList = (props: TabListProps): JSX.Element => {
+  const {
+    "aria-label": ariaLabel,
+    noPadding = false,
+    children,
+    className,
+    ...restProps
+  } = props
+  return (
+    <RACTabList
+      aria-label={ariaLabel}
+      className={classnames(
+        styles.tabList,
+        className,
+        noPadding && styles.noPadding
+      )}
+      {...restProps}
+    >
+      {children}
+    </RACTabList>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabList/index.ts

@@ -0,0 +1 @@
+export * from "./TabList"

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -0,0 +1,12 @@
+.tabPanel {
+  border: 2px solid transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+  }
+}

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import {
+  TabPanel as RACTabPanel,
+  TabPanelProps as RACTabPanelProps,
+} from "react-aria-components"
+import styles from "./TabPanel.module.css"
+
+export type TabPanelProps = RACTabPanelProps
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+export const TabPanel = (props: TabPanelProps): JSX.Element => {
+  const { className, children, ...restProps } = props
+  return (
+    <RACTabPanel className={(styles.tabPanel, className)} {...restProps}>
+      {children}
+    </RACTabPanel>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabPanel/index.ts

@@ -0,0 +1 @@
+export * from "./TabPanel"

package/src/__future__/Tabs/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export * from "./Tab/"
+export * from "./TabList/"
+export * from "./TabPanel/"

package/src/__future__/index.ts

@@ -1,2 +1,3 @@
 export * from "./Select"
 export * from "./Tag"
+export * from "./Tabs"

package/dist/cjs/Loading/LoadingSpinner/LoadingSpinner.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__4SQsH",
-  "spinner": "LoadingSpinner-module_spinner__bDpy0"
-};
-module.exports = styles;

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__4SQsH",
-  "spinner": "LoadingSpinner-module_spinner__bDpy0"
-};
-export { styles as default };

package/src/Loading/LoadingSpinner/LoadingSpinner.module.scss

@@ -1,16 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-
-.loadingSpinner {
-  display: flex;
-}
-
-.spinner {
-  animation: spinner $animation-duration-deliberate
-    $animation-easing-function-ease-in-out infinite;
-}
-
-@keyframes spinner {
-  100% {
-    transform: rotate(360deg);
-  }
-}