@sikt/sds-tabs 2.0.1 → 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [3.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.0...@sikt/sds-tabs@3.0.1) (2023-12-05)
+
+### Bug Fixes
+
+- **tabs:** remove border bottom on hover ([e308b3f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e308b3fa895a05f581e8b1e106d1b7371ef44bc6))
+
+## [3.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@2.0.1...@sikt/sds-tabs@3.0.0) (2023-10-28)
+
+### ⚠ BREAKING CHANGES
+
+- **tokens:** add new tokens to badge package
+- **tokens:** add new tokens to tabs package
+
+### Features
+
+- **tokens:** add new tokens to badge package ([e7f9921](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e7f9921f2c7bf24b5bbf5d49c26cf81c5dedc0f8))
+- **tokens:** add new tokens to tabs package ([1be525d](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1be525d97835dd20d7196f5f07fa66aed4b688ca))
+
+### [2.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@2.0.0...@sikt/sds-tabs@2.0.1) (2023-09-12)
+
+### Bug Fixes
+
+- update invalid html markup ([8f84172](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8f841725de404171c31c6c043bc29f43dbe0ef45))
+
+## [2.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@1.0.1...@sikt/sds-tabs@2.0.0) (2023-05-09)
+
+### ⚠ BREAKING CHANGES
+
+- **tabs:** add forwardref to TabLink
+
+### Features
+
+- **tabs:** add forwardref to TabLink ([fe976ec](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/fe976ece5460d431a6fe70b6c23ee432103e8a08))
+
+### [1.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@1.0.0...@sikt/sds-tabs@1.0.1) (2023-04-29)
+
+## 1.0.0 (2023-04-13)
+
+### Features
+
+- **tabs:** add component ([e5b9dad](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e5b9dadac62f3a565faa001b80018b30323a7a3b))
+- **tabs:** add onchange callback prop ([92b5972](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/92b5972cf8c81d77c285fe3e2d1e26ca8c0b3686))
+- **tabs:** add tab link component ([e343c30](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e343c30ae951fae6810e6eb34a8517ed61ed1db8))
+- **tabs:** set visibility on selected tab badge ([6ad5850](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/6ad5850ed0b054ff4579ca0907d45c4c430a5d83)), closes [#74](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/issues/74)
+
+### Bug Fixes
+
+- **deps:** update sds-core to version 1 ([0e6e326](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/0e6e3260dd1bd7cbfcfa35b708ffe921ac0bceef))
+- **tabs:** change default for select on focus to false ([228677f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/228677fb618020baf489e4bcd8986e75aaa484dc))
+- **tabs:** extend html attributes ([ce3cc20](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ce3cc207afd875db4de77a386796fcb54c66415e))
+- validate element before cloning ([d108acf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d108acf790e8a932fb668469788976b3627d3ab4)), closes [#94](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/issues/94)

package/dist/index.css

@@ -1,2 +1,54 @@
-.sds-tabs{--tab-list-border-bottom:var(--sds-border-size-thin)}.sds-tabs__tab-list{border-bottom:var(--tab-list-border-bottom) solid var(--sds-color-background-action);display:flex;margin-bottom:var(--sds-size-base-xxs)}.sds-tabs__tab{align-items:center;border:0;border-bottom:var(--sds-border-size-bold) solid #0000;color:var(--sds-color-text-default);display:flex;font-size:var(--sds-size-text-s2);line-height:var(--sds-size-text-m);margin-bottom:calc(var(--tab-list-border-bottom)*-1);padding:var(--sds-size-base-m) var(--sds-size-base-s)}.sds-tabs__tab-icon{padding-right:var(--sds-size-base-s)}.sds-tabs__tab-badge{padding-left:var(--sds-size-base-s)}.sds-tabs__tab[aria-selected=true]{border-color:var(--sds-color-surface-action)}.sds-tabs__tab:active{border-color:var(--sds-color-surface-action-active)}.sds-tabs__tab:hover{border-color:var(--sds-color-surface-action-hover)}.sds-tabs__tab:focus-visible{border-color:#0000;outline:var(--sds-size-base-xxs) dashed var(--sds-color-text-info)}.sds-tabs__tab-panel:focus-visible{outline:var(--sds-size-base-xxs) dashed var(--sds-color-text-info)}.sds-tab-link{display:inline-flex;text-decoration:none}.sds-tab-link--selected{border-color:var(--sds-color-surface-action)}.sds-tab-link:focus-visible{outline-offset:0}
+/* tabs.pcss */
+.sds-tabs {
+  --tab-list-border-bottom: var(--sds-space-border-weight-regular);
+}
+.sds-tabs__tab-list {
+  border-bottom: var(--tab-list-border-bottom) solid var(--sds-color-layout-divider-subtle);
+  display: flex;
+  margin-bottom: var(--sds-space-gap-small);
+}
+.sds-tabs__tab {
+  align-items: center;
+  border: 0 none;
+  border-bottom: var(--sds-space-border-weight-bold) solid transparent;
+  color: var(--sds-color-text-primary);
+  display: flex;
+  gap: var(--sds-space-gap-small);
+  font-size: var(--sds-typography-body-fontsize-large);
+  line-height: var(--sds-typography-body-lineheight-large);
+  padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);
+  margin-bottom: calc(var(--tab-list-border-bottom) * -1);
+}
+.sds-tabs__tab-icon {
+  font-size: var(--sds-base-size-m);
+}
+.sds-tabs__tab[aria-selected=true] {
+  border-color: var(--sds-color-interaction-primary-strong-default);
+}
+.sds-tabs__tab:hover,
+.sds-tabs__tab:focus-visible {
+  background-color: var( --sds-color-interaction-primary-transparent-highlight );
+}
+.sds-tabs__tab:active {
+  background-color: var( --sds-color-interaction-primary-transparent-pressed );
+  border-color: var(--sds-color-interaction-primary-strong-pressed);
+}
+.sds-tabs__tab:focus-visible {
+  outline: var(--sds-focus-outline);
+}
+.sds-tabs__tab-panel:focus-visible {
+  outline: var(--sds-focus-outline);
+}
+
+/* tab-link.pcss */
+.sds-tab-link {
+  display: inline-flex;
+  text-decoration: none;
+}
+.sds-tab-link--selected {
+  border-color: var(--sds-color-interaction-primary-strong-default);
+}
+.sds-tab-link:focus-visible {
+  outline-offset: 0;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tabs.pcss","tab-link.pcss"],"names":[],"mappings":"AAAA,UACE,oDAmDF,CAjDE,oBACE,oFACoC,CACpC,YAAa,CACb,sCACF,CAEA,eACE,kBAAmB,CACnB,QAAc,CACd,qDAA4D,CAC5D,mCAAoC,CACpC,YAAa,CACb,iCAAkC,CAClC,kCAAmC,CACnC,oDAAuD,CACvD,qDA0BF,CAxBE,oBACE,oCACF,CAEA,qBACE,mCACF,CAEA,mCACE,4CACF,CAEA,sBACE,mDACF,CAEA,qBACE,kDACF,CAEA,6BACE,kBAAyB,CACzB,kEACF,CAIA,mCACE,kEACF,CClDJ,cACE,mBAAoB,CACpB,oBASF,CAPE,wBACE,4CACF,CAEA,4BACE,gBACF","file":"index.css","sourcesContent":[".sds-tabs {\n  --tab-list-border-bottom: var(--sds-border-size-thin);\n\n  &__tab-list {\n    border-bottom: var(--tab-list-border-bottom) solid\n      var(--sds-color-background-action);\n    display: flex;\n    margin-bottom: var(--sds-size-base-xxs);\n  }\n\n  &__tab {\n    align-items: center;\n    border: 0 none;\n    border-bottom: var(--sds-border-size-bold) solid transparent;\n    color: var(--sds-color-text-default);\n    display: flex;\n    font-size: var(--sds-size-text-s2);\n    line-height: var(--sds-size-text-m);\n    margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n    padding: var(--sds-size-base-m) var(--sds-size-base-s);\n\n    &-icon {\n      padding-right: var(--sds-size-base-s);\n    }\n\n    &-badge {\n      padding-left: var(--sds-size-base-s);\n    }\n\n    &[aria-selected=\"true\"] {\n      border-color: var(--sds-color-surface-action);\n    }\n\n    &:active {\n      border-color: var(--sds-color-surface-action-active);\n    }\n\n    &:hover {\n      border-color: var(--sds-color-surface-action-hover);\n    }\n\n    &:focus-visible {\n      border-color: transparent;\n      outline: var(--sds-size-base-xxs) dashed var(--sds-color-text-info);\n    }\n  }\n\n  &__tab-panel {\n    &:focus-visible {\n      outline: var(--sds-size-base-xxs) dashed var(--sds-color-text-info);\n    }\n  }\n}\n",".sds-tab-link {\n  display: inline-flex;\n  text-decoration: none;\n\n  &--selected {\n    border-color: var(--sds-color-surface-action);\n  }\n\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n"]}
+{"version":3,"sources":["../tabs.pcss","../tab-link.pcss"],"sourcesContent":[".sds-tabs {\n  --tab-list-border-bottom: var(--sds-space-border-weight-regular);\n}\n\n  .sds-tabs__tab-list {\n    border-bottom: var(--tab-list-border-bottom) solid\n      var(--sds-color-layout-divider-subtle);\n    display: flex;\n    margin-bottom: var(--sds-space-gap-small);\n  }\n\n  .sds-tabs__tab {\n    align-items: center;\n    border: 0 none;\n    border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n    color: var(--sds-color-text-primary);\n    display: flex;\n    gap: var(--sds-space-gap-small);\n    font-size: var(--sds-typography-body-fontsize-large);\n    line-height: var(--sds-typography-body-lineheight-large);\n    padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n    margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n  }\n\n  .sds-tabs__tab-icon {\n      font-size: var(--sds-base-size-m);\n    }\n\n  .sds-tabs__tab[aria-selected=\"true\"] {\n      border-color: var(--sds-color-interaction-primary-strong-default);\n    }\n\n  .sds-tabs__tab:hover,\n    .sds-tabs__tab:focus-visible {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n\n  .sds-tabs__tab:active {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n      border-color: var(--sds-color-interaction-primary-strong-pressed);\n    }\n\n  .sds-tabs__tab:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n\n  .sds-tabs__tab-panel:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n",".sds-tab-link {\n  display: inline-flex;\n  text-decoration: none;\n}\n\n  .sds-tab-link--selected {\n    border-color: var(--sds-color-interaction-primary-strong-default);\n  }\n\n  .sds-tab-link:focus-visible {\n    outline-offset: 0;\n  }\n"],"mappings":";AAAA,CAAC;AACC,4BAA0B,IAAI;AAChC;AAEE,CAAC;AACC,iBAAe,IAAI,0BAA0B,MAC3C,IAAI;AACN,WAAS;AACT,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa;AACb,UAAQ,EAAE;AACV,iBAAe,IAAI,gCAAgC,MAAM;AACzD,SAAO,IAAI;AACX,WAAS;AACT,OAAK,IAAI;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,WAAS,IAAI,4BAA4B,IAAI;AAC7C,iBAAe,KAAK,IAAI,0BAA0B,EAAE;AACtD;AAEA,CAAC;AACG,aAAW,IAAI;AACjB;AAEF,CAjBC,aAiBa,CAAC;AACX,gBAAc,IAAI;AACpB;AAEF,CArBC,aAqBa;AACZ,CAtBD,aAsBe;AACZ,oBAAkB,KAChB;AAEJ;AAEF,CA5BC,aA4Ba;AACV,oBAAkB,KAChB;AAEF,gBAAc,IAAI;AACpB;AAEF,CAnCC,aAmCa;AACV,WAAS,IAAI;AACf;AAEF,CAAC,mBAAmB;AAChB,WAAS,IAAI;AACf;;;ACpDJ,CAAC;AACC,WAAS;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CATD,YASc;AACX,kBAAgB;AAClB;","names":[]}

package/dist/{cjs/index.d.ts → index.d.mts}

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import React from "react";
-import { ReactNode, HTMLAttributes, AnchorHTMLAttributes } from "react";
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     defaultIndex?: number;
     isSelectOnFocus?: boolean;
@@ -8,25 +8,29 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     children: ReactNode;
     className?: string;
 }
-declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, className, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, className, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+
 interface TabListProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     "aria-label": string;
     className?: string;
 }
-declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => react_jsx_runtime.JSX.Element;
+
 interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     className?: string;
     icon?: ReactNode;
     badge?: ReactNode;
 }
-declare const Tab: ({ children, className, icon, badge, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: ({ children, className, icon, badge, ...rest }: TabProps) => react_jsx_runtime.JSX.Element;
+
 interface TabPanelProps {
     children: ReactNode;
     className?: string;
 }
-declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
     className?: string;
@@ -35,5 +39,5 @@ interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     isSelected?: boolean;
 }
 declare const TabLink: React.ForwardRefExoticComponent<TabLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabLinkProps };
-export { Tabs, TabList, Tab, TabPanel, TabLink };
+
+export { Tab, TabLink, type TabLinkProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import React from "react";
-import { ReactNode, HTMLAttributes, AnchorHTMLAttributes } from "react";
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     defaultIndex?: number;
     isSelectOnFocus?: boolean;
@@ -8,25 +8,29 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     children: ReactNode;
     className?: string;
 }
-declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, className, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, className, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+
 interface TabListProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     "aria-label": string;
     className?: string;
 }
-declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => react_jsx_runtime.JSX.Element;
+
 interface TabProps extends HTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     className?: string;
     icon?: ReactNode;
     badge?: ReactNode;
 }
-declare const Tab: ({ children, className, icon, badge, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: ({ children, className, icon, badge, ...rest }: TabProps) => react_jsx_runtime.JSX.Element;
+
 interface TabPanelProps {
     children: ReactNode;
     className?: string;
 }
-declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
     className?: string;
@@ -35,5 +39,5 @@ interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     isSelected?: boolean;
 }
 declare const TabLink: React.ForwardRefExoticComponent<TabLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabLinkProps };
-export { Tabs, TabList, Tab, TabPanel, TabLink };
+
+export { Tab, TabLink, type TabLinkProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/index.js

@@ -1,2 +1 @@
-import{jsx as e,Fragment as s,jsxs as a}from"react/jsx-runtime";import{createContext as t,useState as n,useId as i,useEffect as l,Children as c,isValidElement as d,cloneElement as r,useContext as o,forwardRef as b}from"react";import h from"clsx";const m=t(null),u=({defaultIndex:a=0,onChange:t,isSelectOnFocus:o=!1,children:b,className:u,...f})=>{const[x,p]=n(a),[_,N]=n(a),g=i();l((()=>{t&&_!==x&&t(x)}),[t,x]);const v=c.toArray(b),y=v.length-1;return e(m.Provider,{value:{id:g,count:y,isSelectOnFocus:o,selectedIndex:x,setSelectedIndex:p,setPreviousIndex:N},children:e("div",{className:h("sds-tabs",u),...f,children:c.map(v,((a,t)=>d(a)&&t>0?e(s,{children:r(a,{index:t-1})}):a))})})},f=({children:a,"aria-label":t,className:n,...i})=>{const l=c.toArray(a);return e("div",{className:h("sds-tabs__tab-list",n),role:"tablist","aria-label":t,...i,children:c.map(l,((a,t)=>{if(d(a))return e(s,{children:r(a,{index:t})})}))})},x=({children:s,className:t,icon:n,badge:i,...l})=>{const{index:c}=l,{id:b,count:u,isSelectOnFocus:f,selectedIndex:x,setSelectedIndex:p,setPreviousIndex:_}=o(m),N=c===x,g=e=>{f&&(_(x),p(e))};return a("button",{className:h("sds-tabs__tab",t),role:"tab","aria-selected":N,"aria-controls":`panel-${b}-${c}`,id:`tab-${b}-${c}`,tabIndex:N?0:-1,onClick:()=>{_(x),p(c)},onKeyDown:e=>{const s=u-1,a=e.currentTarget,t=a.parentElement?.firstChild,n=a.parentElement?.lastChild;if("ArrowLeft"===e.key){const e=a.previousSibling;c>0?e.focus():n.focus(),g(x>0?x-1:s)}else if("ArrowRight"===e.key){const e=a.nextSibling;c<s?e.focus():t.focus(),g(x<s?x+1:0)}else"Home"===e.key?(t.focus(),g(0)):"End"===e.key?(n.focus(),g(s)):"Enter"!==e.key&&"Space"!==e.code||p(c)},...l,children:[n&&e("span",{className:"sds-tabs__tab-icon",children:n}),s,i&&e("span",{className:"sds-tabs__tab-badge",children:N?d(i)&&r(i,{visibility:"high"}):i})]})},p=({children:s,className:a,...t})=>{const{index:n}=t,{id:i,selectedIndex:l}=o(m),c=n===l;return e("div",{className:h("sds-tabs__tab-panel",a),id:`panel-${i}-${n}`,role:"tabpanel",tabIndex:c?0:-1,"aria-labelledby":`tab-${i}-${n}`,hidden:!c,...t,children:s})},_=b((({children:s,className:t,icon:n,badge:i,href:l,isSelected:c,...o},b)=>a("a",{className:h("sds-tabs__tab","sds-tab-link",c&&"sds-tab-link--selected",t),href:l,ref:b,...o,children:[n&&e("div",{className:"sds-tabs__tab-icon",children:n}),s,i&&e("div",{className:"sds-tabs__tab-badge",children:c?d(i)&&r(i,{visibility:"high"}):i})]})));_.displayName="TabLink";export{x as Tab,_ as TabLink,f as TabList,p as TabPanel,u as Tabs};
-//# sourceMappingURL=index.js.map
+"use strict";var e=require("react"),s=require("clsx"),t=require("react/jsx-runtime");function a(e){return e&&e.__esModule?e:{default:e}}var l=a(s),n=e.createContext(null),i=e.forwardRef((({children:s,className:a,icon:n,badge:i,href:d,isSelected:r,...c},o)=>t.jsxs("a",{className:l.default("sds-tabs__tab","sds-tab-link",r&&"sds-tab-link--selected",a),href:d,ref:o,...c,children:[n&&t.jsx("div",{className:"sds-tabs__tab-icon",children:n}),s,i&&t.jsx("div",{className:"sds-tabs__tab-badge",children:r?e.isValidElement(i)&&e.cloneElement(i,{visibility:"high"}):i})]})));i.displayName="TabLink",exports.Tab=({children:s,className:a,icon:i,badge:d,...r})=>{const{index:c}=r,{id:o,count:u,isSelectOnFocus:b,selectedIndex:x,setSelectedIndex:h,setPreviousIndex:m}=e.useContext(n),f=c===x,p=e=>{b&&(m(x),h(e))};return t.jsxs("button",{className:l.default("sds-tabs__tab",a),role:"tab","aria-selected":f,"aria-controls":`panel-${o}-${c}`,id:`tab-${o}-${c}`,tabIndex:f?0:-1,onClick:()=>{m(x),h(c)},onKeyDown:e=>{var s,t;const a=u-1,l=e.currentTarget,n=null==(s=l.parentElement)?void 0:s.firstChild,i=null==(t=l.parentElement)?void 0:t.lastChild;if("ArrowLeft"===e.key){const e=l.previousSibling;c>0?e.focus():i.focus(),p(x>0?x-1:a)}else if("ArrowRight"===e.key){const e=l.nextSibling;c<a?e.focus():n.focus(),p(x<a?x+1:0)}else"Home"===e.key?(n.focus(),p(0)):"End"===e.key?(i.focus(),p(a)):"Enter"!==e.key&&"Space"!==e.code||h(c)},...r,children:[i&&t.jsx("span",{className:"sds-tabs__tab-icon",children:i}),s,d&&t.jsx("span",{className:"sds-tabs__tab-badge",children:f?e.isValidElement(d)&&e.cloneElement(d,{visibility:"strong"}):d})]})},exports.TabLink=i,exports.TabList=({children:s,"aria-label":a,className:n,...i})=>{const d=e.Children.toArray(s);return t.jsx("div",{className:l.default("sds-tabs__tab-list",n),role:"tablist","aria-label":a,...i,children:e.Children.map(d,((s,a)=>{if(e.isValidElement(s))return t.jsx(t.Fragment,{children:e.cloneElement(s,{index:a})})}))})},exports.TabPanel=({children:s,className:a,...i})=>{const{index:d}=i,{id:r,selectedIndex:c}=e.useContext(n),o=d===c;return t.jsx("div",{className:l.default("sds-tabs__tab-panel",a),id:`panel-${r}-${d}`,role:"tabpanel",tabIndex:o?void 0:-1,"aria-labelledby":`tab-${r}-${d}`,hidden:!o,...i,children:s})},exports.Tabs=({defaultIndex:s=0,onChange:a,isSelectOnFocus:i=!1,children:d,className:r,...c})=>{const[o,u]=e.useState(s),[b,x]=e.useState(s),h=e.useId();e.useEffect((()=>{a&&b!==o&&a(o)}),[a,o]);const m=e.Children.toArray(d),f=m.length-1;return t.jsx(n.Provider,{value:{id:h,count:f,isSelectOnFocus:i,selectedIndex:o,setSelectedIndex:u,setPreviousIndex:x},children:t.jsx("div",{className:l.default("sds-tabs",r),...c,children:e.Children.map(m,((s,a)=>e.isValidElement(s)&&a>0?t.jsx(t.Fragment,{children:e.cloneElement(s,{index:a-1})}):s))})})};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../Tabs.tsx","../TabList.tsx","../Tab.tsx","../TabPanel.tsx","../TabLink.tsx"],"sourcesContent":["import React, {\n  Children,\n  ReactNode,\n  cloneElement,\n  useId,\n  useState,\n  isValidElement,\n  createContext,\n  ReactElement,\n  useEffect,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport type TabsContextType = {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n};\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  }\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import React, {\n  Children,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                }\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import React, {\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(badge as ReactElement, { visibility: \"high\" })\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, { ReactNode, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const { id, selectedIndex } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? 0 : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import React, {\n  AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(badge as ReactElement, { visibility: \"high\" })\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  }\n);\n\nTabLink.displayName = \"TabLink\";\n"],"names":["TabsContext","createContext","Tabs","defaultIndex","onChange","isSelectOnFocus","children","className","rest","selectedIndex","setSelectedIndex","useState","previousIndex","setPreviousIndex","id","useId","useEffect","arrayChildren","Children","toArray","count","length","_jsx","Provider","value","clsx","map","child","index","isValidElement","_Fragment","cloneElement","TabList","ariaLabel","role","Tab","icon","badge","useContext","isSelected","handleSelect","_jsxs","tabIndex","onClick","onKeyDown","event","lastIndex","currentTarget","firstChild","parentElement","lastChild","key","previousSibling","focus","nextSibling","code","visibility","TabPanel","hidden","TabLink","forwardRef","href","ref","displayName"],"mappings":"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"}
+{"version":3,"sources":["../Tabs.tsx","../TabList.tsx","../Tab.tsx","../TabPanel.tsx","../TabLink.tsx"],"names":["Children","cloneElement","isValidElement","clsx","Fragment","jsx","index","useContext","jsxs"],"mappings":";AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OAEK;AACP,OAAO,UAAU;AA4DH;AA/CP,IAAM,cAAc,cAAsC,IAAI;AAW9D,IAAM,OAAO,CAAC;AAAA,EACnB,eAAe;AAAA,EACf;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,KAAK,MAAM;AAEjB,YAAU,MAAM;AACd,QAAI,YAAY,kBAAkB,eAAe;AAC/C,eAAS,aAAa;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,aAAa,CAAC;AAE5B,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAM,QAAQ,cAAc,SAAS;AAErC,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,YAAY,SAAS,GAAI,GAAG,MAC9C,mBAAS,IAAI,eAAe,CAAC,OAAO,UAAU;AAC7C,YAAI,eAAe,KAAK,KAAK,QAAQ,GAAG;AACtC,iBACE,gCACG;AAAA,YACC;AAAA,YACA;AAAA,cACE,OAAO,QAAQ;AAAA,YACjB;AAAA,UACF,GACF;AAAA,QAEJ,OAAO;AACL,iBAAO;AAAA,QACT;AAAA,MACF,CAAC,GACH;AAAA;AAAA,EACF;AAEJ;;;ACxFA;AAAA,EACE,YAAAA;AAAA,EAGA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,OAEK;AACP,OAAOC,WAAU;AA2BL,qBAAAC,WAAA,OAAAC,YAAA;AAlBL,IAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,QAAM,gBAAgBL,UAAS,QAAQ,QAAQ;AAE/C,SACE,gBAAAK;AAAA,IAAC;AAAA;AAAA,MACC,WAAWF,MAAK,sBAAsB,SAAS;AAAA,MAC/C,MAAK;AAAA,MACL,cAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAAH,UAAS,IAAI,eAAe,CAAC,OAAO,UAAU;AAC7C,YAAIE,gBAAe,KAAK,GAAG;AACzB,iBACE,gBAAAG,KAAAD,WAAA,EACG,UAAAH;AAAA,YACC;AAAA,YACA;AAAA,cACE;AAAA,YACF;AAAA,UACF,GACF;AAAA,QAEJ;AAAA,MACF,CAAC;AAAA;AAAA,EACH;AAEJ;;;AChDA;AAAA,EACE,gBAAAA;AAAA,EACA,kBAAAC;AAAA,EAKA;AAAA,OACK;AACP,OAAOC,WAAU;AAsEb,SAcW,OAAAE,MAdX;AA5DG,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgB;AACd,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,WAAW;AAC1B,QAAM,aAAa,UAAU;AAC7B,QAAM,eAAe,CAACC,WAAkB;AACtC,QAAI,iBAAiB;AACnB,uBAAiB,aAAa;AAC9B,uBAAiBA,MAAK;AAAA,IACxB;AAAA,EACF;AACA,QAAM,iBAAiB,CAAC,UAA4C;AA1CtE;AA2CI,UAAM,aAAa;AACnB,UAAM,YAAY,QAAQ;AAC1B,UAAM,gBAAgB,MAAM;AAC5B,UAAM,cAAa,mBAAc,kBAAd,mBAA6B;AAChD,UAAM,aAAY,mBAAc,kBAAd,mBAA6B;AAE/C,QAAI,MAAM,QAAQ,aAAa;AAC7B,YAAM,kBAAkB,cAAc;AACtC,UAAI,QAAQ,YAAY;AACtB,wBAAgB,MAAM;AAAA,MACxB,OAAO;AACL,kBAAU,MAAM;AAAA,MAClB;AAEA,mBAAa,gBAAgB,aAAa,gBAAgB,IAAI,SAAS;AAAA,IACzE,WAAW,MAAM,QAAQ,cAAc;AACrC,YAAM,cAAc,cAAc;AAClC,UAAI,QAAQ,WAAW;AACrB,oBAAY,MAAM;AAAA,MACpB,OAAO;AACL,mBAAW,MAAM;AAAA,MACnB;AAEA,mBAAa,gBAAgB,YAAY,gBAAgB,IAAI,UAAU;AAAA,IACzE,WAAW,MAAM,QAAQ,QAAQ;AAC/B,iBAAW,MAAM;AACjB,mBAAa,UAAU;AAAA,IACzB,WAAW,MAAM,QAAQ,OAAO;AAC9B,gBAAU,MAAM;AAChB,mBAAa,SAAS;AAAA,IACxB,WAAW,MAAM,QAAQ,WAAW,MAAM,SAAS,SAAS;AAC1D,uBAAiB,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAWH,MAAK,iBAAiB,SAAS;AAAA,MAC1C,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe,SAAS,EAAE,IAAI,KAAK;AAAA,MACnC,IAAI,OAAO,EAAE,IAAI,KAAK;AAAA,MACtB,UAAU,aAAa,IAAI;AAAA,MAC3B,SAAS,MAAM;AACb,yBAAiB,aAAa;AAC9B,yBAAiB,KAAK;AAAA,MACxB;AAAA,MACA,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA,gBAAQ,gBAAAE,KAAC,UAAK,WAAU,sBAAsB,gBAAK;AAAA,QACnD;AAAA,QACA,SACC,gBAAAA,KAAC,UAAK,WAAU,uBACb,uBACGH,gBAAe,KAAK,KACpBD,cAAa,OAAuB,EAAE,YAAY,SAAS,CAAC,IAC5D,OACN;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;ACzGA,SAA2B,cAAAM,mBAAkB;AAC7C,OAAOJ,WAAU;AAab,gBAAAE,YAAA;AALG,IAAM,WAAW,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAqB;AAC3E,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,EAAE,IAAI,cAAc,IAAIE,YAAW,WAAW;AACpD,QAAM,aAAa,UAAU;AAC7B,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC,WAAWF,MAAK,uBAAuB,SAAS;AAAA,MAChD,IAAI,SAAS,EAAE,IAAI,KAAK;AAAA,MACxB,MAAK;AAAA,MACL,UAAU,aAAa,SAAY;AAAA,MACnC,mBAAiB,OAAO,EAAE,IAAI,KAAK;AAAA,MACnC,QAAQ,CAAC;AAAA,MACR,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC1BA;AAAA,EAEE,gBAAAF;AAAA,EACA;AAAA,EACA,kBAAAC;AAAA,OAGK;AACP,OAAOC,WAAU;AAyBX,SAWW,OAAAE,MAXX,QAAAG,aAAA;AAdC,IAAM,UAAU;AAAA,EACrB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAWL;AAAA,UACT;AAAA,UACA;AAAA,UACA,cAAc;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,kBAAQ,gBAAAE,KAAC,SAAI,WAAU,sBAAsB,gBAAK;AAAA,UAClD;AAAA,UACA,SACC,gBAAAA,KAAC,SAAI,WAAU,uBACZ,uBACGH,gBAAe,KAAK,KACpBD,cAAa,OAAuB,EAAE,YAAY,OAAO,CAAC,IAC1D,OACN;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc","sourcesContent":["import React, {\n  Children,\n  ReactNode,\n  cloneElement,\n  useId,\n  useState,\n  isValidElement,\n  createContext,\n  ReactElement,\n  useEffect,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport type TabsContextType = {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n};\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import React, {\n  Children,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import React, {\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(badge as ReactElement, { visibility: \"strong\" })\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, { ReactNode, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const { id, selectedIndex } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import React, {\n  AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(badge as ReactElement, { visibility: \"high\" })\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}

package/dist/index.mjs

@@ -0,0 +1 @@
+import{createContext as e,forwardRef as s,isValidElement as a,cloneElement as t,useState as n,useId as l,useEffect as i,Children as d,useContext as c}from"react";import r from"clsx";import{jsxs as o,jsx as b,Fragment as h}from"react/jsx-runtime";var m=e(null),u=({defaultIndex:e=0,onChange:s,isSelectOnFocus:c=!1,children:o,className:u,...f})=>{const[x,p]=n(e),[v,_]=n(e),N=l();i((()=>{s&&v!==x&&s(x)}),[s,x]);const g=d.toArray(o),y=g.length-1;return b(m.Provider,{value:{id:N,count:y,isSelectOnFocus:c,selectedIndex:x,setSelectedIndex:p,setPreviousIndex:_},children:b("div",{className:r("sds-tabs",u),...f,children:d.map(g,((e,s)=>a(e)&&s>0?b(h,{children:t(e,{index:s-1})}):e))})})},f=({children:e,"aria-label":s,className:n,...l})=>{const i=d.toArray(e);return b("div",{className:r("sds-tabs__tab-list",n),role:"tablist","aria-label":s,...l,children:d.map(i,((e,s)=>{if(a(e))return b(h,{children:t(e,{index:s})})}))})},x=({children:e,className:s,icon:n,badge:l,...i})=>{const{index:d}=i,{id:h,count:u,isSelectOnFocus:f,selectedIndex:x,setSelectedIndex:p,setPreviousIndex:v}=c(m),_=d===x,N=e=>{f&&(v(x),p(e))};return o("button",{className:r("sds-tabs__tab",s),role:"tab","aria-selected":_,"aria-controls":`panel-${h}-${d}`,id:`tab-${h}-${d}`,tabIndex:_?0:-1,onClick:()=>{v(x),p(d)},onKeyDown:e=>{var s,a;const t=u-1,n=e.currentTarget,l=null==(s=n.parentElement)?void 0:s.firstChild,i=null==(a=n.parentElement)?void 0:a.lastChild;if("ArrowLeft"===e.key){const e=n.previousSibling;d>0?e.focus():i.focus(),N(x>0?x-1:t)}else if("ArrowRight"===e.key){const e=n.nextSibling;d<t?e.focus():l.focus(),N(x<t?x+1:0)}else"Home"===e.key?(l.focus(),N(0)):"End"===e.key?(i.focus(),N(t)):"Enter"!==e.key&&"Space"!==e.code||p(d)},...i,children:[n&&b("span",{className:"sds-tabs__tab-icon",children:n}),e,l&&b("span",{className:"sds-tabs__tab-badge",children:_?a(l)&&t(l,{visibility:"strong"}):l})]})},p=({children:e,className:s,...a})=>{const{index:t}=a,{id:n,selectedIndex:l}=c(m),i=t===l;return b("div",{className:r("sds-tabs__tab-panel",s),id:`panel-${n}-${t}`,role:"tabpanel",tabIndex:i?void 0:-1,"aria-labelledby":`tab-${n}-${t}`,hidden:!i,...a,children:e})},v=s((({children:e,className:s,icon:n,badge:l,href:i,isSelected:d,...c},h)=>o("a",{className:r("sds-tabs__tab","sds-tab-link",d&&"sds-tab-link--selected",s),href:i,ref:h,...c,children:[n&&b("div",{className:"sds-tabs__tab-icon",children:n}),e,l&&b("div",{className:"sds-tabs__tab-badge",children:d?a(l)&&t(l,{visibility:"high"}):l})]})));v.displayName="TabLink";export{x as Tab,v as TabLink,f as TabList,p as TabPanel,u as Tabs};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../Tabs.tsx","../TabList.tsx","../Tab.tsx","../TabPanel.tsx","../TabLink.tsx"],"names":["Children","cloneElement","isValidElement","clsx","Fragment","jsx","index","useContext","jsxs"],"mappings":"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","sourcesContent":["import React, {\n  Children,\n  ReactNode,\n  cloneElement,\n  useId,\n  useState,\n  isValidElement,\n  createContext,\n  ReactElement,\n  useEffect,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport type TabsContextType = {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n};\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import React, {\n  Children,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import React, {\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(badge as ReactElement, { visibility: \"strong\" })\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, { ReactNode, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const { id, selectedIndex } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import React, {\n  AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(badge as ReactElement, { visibility: \"high\" })\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@sikt/sds-tabs",
-  "version": "2.0.1",
+  "version": "3.0.1",
   "license": "UNLICENSED",
-  "main": "dist/cjs/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
   "files": [
-    "dist"
+    "CHANGELOG.md",
+    "dist",
+    "README.md"
   ],
   "scripts": {
-    "build": "rollup -c ../../rollup.config.mjs"
+    "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^1.0.1"
+    "@sikt/sds-core": "^3.0.0",
+    "@sikt/sds-tokens": "^1.0.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",

package/dist/cjs/index.css

@@ -1,2 +0,0 @@
-.sds-tabs{--tab-list-border-bottom:var(--sds-border-size-thin)}.sds-tabs__tab-list{border-bottom:var(--tab-list-border-bottom) solid var(--sds-color-background-action);display:flex;margin-bottom:var(--sds-size-base-xxs)}.sds-tabs__tab{align-items:center;border:0;border-bottom:var(--sds-border-size-bold) solid #0000;color:var(--sds-color-text-default);display:flex;font-size:var(--sds-size-text-s2);line-height:var(--sds-size-text-m);margin-bottom:calc(var(--tab-list-border-bottom)*-1);padding:var(--sds-size-base-m) var(--sds-size-base-s)}.sds-tabs__tab-icon{padding-right:var(--sds-size-base-s)}.sds-tabs__tab-badge{padding-left:var(--sds-size-base-s)}.sds-tabs__tab[aria-selected=true]{border-color:var(--sds-color-surface-action)}.sds-tabs__tab:active{border-color:var(--sds-color-surface-action-active)}.sds-tabs__tab:hover{border-color:var(--sds-color-surface-action-hover)}.sds-tabs__tab:focus-visible{border-color:#0000;outline:var(--sds-size-base-xxs) dashed var(--sds-color-text-info)}.sds-tabs__tab-panel:focus-visible{outline:var(--sds-size-base-xxs) dashed var(--sds-color-text-info)}.sds-tab-link{display:inline-flex;text-decoration:none}.sds-tab-link--selected{border-color:var(--sds-color-surface-action)}.sds-tab-link:focus-visible{outline-offset:0}
-/*# sourceMappingURL=index.css.map */

package/dist/cjs/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["tabs.pcss","tab-link.pcss"],"names":[],"mappings":"AAAA,UACE,oDAmDF,CAjDE,oBACE,oFACoC,CACpC,YAAa,CACb,sCACF,CAEA,eACE,kBAAmB,CACnB,QAAc,CACd,qDAA4D,CAC5D,mCAAoC,CACpC,YAAa,CACb,iCAAkC,CAClC,kCAAmC,CACnC,oDAAuD,CACvD,qDA0BF,CAxBE,oBACE,oCACF,CAEA,qBACE,mCACF,CAEA,mCACE,4CACF,CAEA,sBACE,mDACF,CAEA,qBACE,kDACF,CAEA,6BACE,kBAAyB,CACzB,kEACF,CAIA,mCACE,kEACF,CClDJ,cACE,mBAAoB,CACpB,oBASF,CAPE,wBACE,4CACF,CAEA,4BACE,gBACF","file":"index.css","sourcesContent":[".sds-tabs {\n  --tab-list-border-bottom: var(--sds-border-size-thin);\n\n  &__tab-list {\n    border-bottom: var(--tab-list-border-bottom) solid\n      var(--sds-color-background-action);\n    display: flex;\n    margin-bottom: var(--sds-size-base-xxs);\n  }\n\n  &__tab {\n    align-items: center;\n    border: 0 none;\n    border-bottom: var(--sds-border-size-bold) solid transparent;\n    color: var(--sds-color-text-default);\n    display: flex;\n    font-size: var(--sds-size-text-s2);\n    line-height: var(--sds-size-text-m);\n    margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n    padding: var(--sds-size-base-m) var(--sds-size-base-s);\n\n    &-icon {\n      padding-right: var(--sds-size-base-s);\n    }\n\n    &-badge {\n      padding-left: var(--sds-size-base-s);\n    }\n\n    &[aria-selected=\"true\"] {\n      border-color: var(--sds-color-surface-action);\n    }\n\n    &:active {\n      border-color: var(--sds-color-surface-action-active);\n    }\n\n    &:hover {\n      border-color: var(--sds-color-surface-action-hover);\n    }\n\n    &:focus-visible {\n      border-color: transparent;\n      outline: var(--sds-size-base-xxs) dashed var(--sds-color-text-info);\n    }\n  }\n\n  &__tab-panel {\n    &:focus-visible {\n      outline: var(--sds-size-base-xxs) dashed var(--sds-color-text-info);\n    }\n  }\n}\n",".sds-tab-link {\n  display: inline-flex;\n  text-decoration: none;\n\n  &--selected {\n    border-color: var(--sds-color-surface-action);\n  }\n\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n"]}

package/dist/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("react"),t=require("clsx");const a=s.createContext(null),n=s.forwardRef((({children:a,className:n,icon:l,badge:i,href:d,isSelected:r,...c},o)=>e.jsxs("a",{className:t("sds-tabs__tab","sds-tab-link",r&&"sds-tab-link--selected",n),href:d,ref:o,...c,children:[l&&e.jsx("div",{className:"sds-tabs__tab-icon",children:l}),a,i&&e.jsx("div",{className:"sds-tabs__tab-badge",children:r?s.isValidElement(i)&&s.cloneElement(i,{visibility:"high"}):i})]})));n.displayName="TabLink",exports.Tab=({children:n,className:l,icon:i,badge:d,...r})=>{const{index:c}=r,{id:o,count:b,isSelectOnFocus:x,selectedIndex:u,setSelectedIndex:h,setPreviousIndex:m}=s.useContext(a),f=c===u,p=e=>{x&&(m(u),h(e))};return e.jsxs("button",{className:t("sds-tabs__tab",l),role:"tab","aria-selected":f,"aria-controls":`panel-${o}-${c}`,id:`tab-${o}-${c}`,tabIndex:f?0:-1,onClick:()=>{m(u),h(c)},onKeyDown:e=>{const s=b-1,t=e.currentTarget,a=t.parentElement?.firstChild,n=t.parentElement?.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;c>0?e.focus():n.focus(),p(u>0?u-1:s)}else if("ArrowRight"===e.key){const e=t.nextSibling;c<s?e.focus():a.focus(),p(u<s?u+1:0)}else"Home"===e.key?(a.focus(),p(0)):"End"===e.key?(n.focus(),p(s)):"Enter"!==e.key&&"Space"!==e.code||h(c)},...r,children:[i&&e.jsx("span",{className:"sds-tabs__tab-icon",children:i}),n,d&&e.jsx("span",{className:"sds-tabs__tab-badge",children:f?s.isValidElement(d)&&s.cloneElement(d,{visibility:"high"}):d})]})},exports.TabLink=n,exports.TabList=({children:a,"aria-label":n,className:l,...i})=>{const d=s.Children.toArray(a);return e.jsx("div",{className:t("sds-tabs__tab-list",l),role:"tablist","aria-label":n,...i,children:s.Children.map(d,((t,a)=>{if(s.isValidElement(t))return e.jsx(e.Fragment,{children:s.cloneElement(t,{index:a})})}))})},exports.TabPanel=({children:n,className:l,...i})=>{const{index:d}=i,{id:r,selectedIndex:c}=s.useContext(a),o=d===c;return e.jsx("div",{className:t("sds-tabs__tab-panel",l),id:`panel-${r}-${d}`,role:"tabpanel",tabIndex:o?0:-1,"aria-labelledby":`tab-${r}-${d}`,hidden:!o,...i,children:n})},exports.Tabs=({defaultIndex:n=0,onChange:l,isSelectOnFocus:i=!1,children:d,className:r,...c})=>{const[o,b]=s.useState(n),[x,u]=s.useState(n),h=s.useId();s.useEffect((()=>{l&&x!==o&&l(o)}),[l,o]);const m=s.Children.toArray(d),f=m.length-1;return e.jsx(a.Provider,{value:{id:h,count:f,isSelectOnFocus:i,selectedIndex:o,setSelectedIndex:b,setPreviousIndex:u},children:e.jsx("div",{className:t("sds-tabs",r),...c,children:s.Children.map(m,((t,a)=>s.isValidElement(t)&&a>0?e.jsx(e.Fragment,{children:s.cloneElement(t,{index:a-1})}):t))})})};
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../Tabs.tsx","../../TabLink.tsx","../../Tab.tsx","../../TabList.tsx","../../TabPanel.tsx"],"sourcesContent":["import React, {\n  Children,\n  ReactNode,\n  cloneElement,\n  useId,\n  useState,\n  isValidElement,\n  createContext,\n  ReactElement,\n  useEffect,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport type TabsContextType = {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n};\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  }\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import React, {\n  AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(badge as ReactElement, { visibility: \"high\" })\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  }\n);\n\nTabLink.displayName = \"TabLink\";\n","import React, {\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(badge as ReactElement, { visibility: \"high\" })\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import React, {\n  Children,\n  ReactNode,\n  ReactElement,\n  cloneElement,\n  isValidElement,\n  HTMLAttributes,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                }\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import React, { ReactNode, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsContext, TabsContextType } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const { id, selectedIndex } = useContext(TabsContext) as TabsContextType;\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? 0 : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TabsContext","createContext","TabLink","forwardRef","children","className","icon","badge","href","isSelected","rest","ref","_jsxs","clsx","_jsx","isValidElement","cloneElement","visibility","displayName","index","id","count","isSelectOnFocus","selectedIndex","setSelectedIndex","setPreviousIndex","useContext","handleSelect","role","tabIndex","onClick","onKeyDown","event","lastIndex","currentTarget","firstChild","parentElement","lastChild","key","previousSibling","focus","nextSibling","code","jsx","ariaLabel","arrayChildren","Children","toArray","map","child","_Fragment","Fragment","hidden","defaultIndex","onChange","useState","previousIndex","useId","useEffect","length","Provider","value"],"mappings":"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"}