@sats-group/ui-lib 87.3.0 → 88.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "87.3.0",
+  "version": "88.1.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/radio/radio.d.ts

@@ -6,6 +6,8 @@ declare const RefRadio: React.ForwardRefExoticComponent<{
     label?: string;
     name: string;
     showCustomError?: boolean;
+    extra?: any;
+    onChangeFunc?: ((event: React.ChangeEvent<HTMLInputElement>, extra: any) => void) | undefined;
     value: string;
     hasHover?: boolean;
     isWide?: boolean;

package/react/radio/radio.js

@@ -1,2 +1,2 @@
-"use client";var R=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?R(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var v=(a,i)=>{var o={};for(var e in a)f.call(a,e)&&i.indexOf(e)<0&&(o[e]=a[e]);if(a!=null&&l)for(var e of l(a))i.indexOf(e)<0&&p.call(a,e)&&(o[e]=a[e]);return o};import T from"classnames";import*as r from"react";import w from"../use-input-validation";import c from"../text";import{colors as z}from"./radio.types";const h=r.forwardRef((k,b)=>{var m=k,{children:a,color:i,description:o,label:e,name:_,showCustomError:I=!0,value:N,isWide:g=!0,hasHover:C=!1}=m,n=v(m,["children","color","description","label","name","showCustomError","value","isWide","hasHover"]);const[y,x,s]=w();return r.createElement("label",{className:T("radio",{"radio--error":s,"radio--wide":g,"radio--hover":C},i)},r.createElement("input",u({name:_,value:N,ref:b,type:"radio",onChange:d=>{n.onChange&&n.onChange(d),y(d)},onInvalid:d=>{n.onInvalid&&n.onInvalid(d),x(d)}},n)),r.createElement("div",{className:"radio__label"},r.createElement("span",{className:"radio__fake-element"}),r.createElement("span",null,e,a)),s&&I&&r.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&r.createElement(c,{className:"radio__description",size:c.sizes.small},o))});h.displayName="Radio";const j=Object.assign(h,{colors:z});var W=j;export{W as default};
+"use client";var w=Object.defineProperty;var d=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var p=(a,e,o)=>e in a?w(a,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[e]=o,c=(a,e)=>{for(var o in e||(e={}))f.call(e,o)&&p(a,o,e[o]);if(d)for(var o of d(e))u.call(e,o)&&p(a,o,e[o]);return a};var h=(a,e)=>{var o={};for(var n in a)f.call(a,n)&&e.indexOf(n)<0&&(o[n]=a[n]);if(a!=null&&d)for(var n of d(a))e.indexOf(n)<0&&u.call(a,n)&&(o[n]=a[n]);return o};import z from"classnames";import*as i from"react";import H from"../use-input-validation";import t from"../text";import{colors as L}from"./radio.types";const v=i.forwardRef((j,x)=>{var m=j,{children:a,color:e,description:o,label:n,name:I,showCustomError:_=!0,value:g,isWide:C=!0,hasHover:N=!1,extra:T,onChangeFunc:b=()=>{}}=m,l=h(m,["children","color","description","label","name","showCustomError","value","isWide","hasHover","extra","onChangeFunc"]);const[y,R,s]=H(),E=r=>{l.onChange&&l.onChange(r),y(r),b(r,T)};return i.createElement("label",{className:z("radio",{"radio--error":s,"radio--wide":C,"radio--hover":N},e)},i.createElement("input",c({name:I,value:g,ref:x,type:"radio",onChange:E,onInvalid:r=>{l.onInvalid&&l.onInvalid(r),R(r)}},l)),i.createElement(t,{className:"radio__label"},i.createElement("span",{className:"radio__fake-element"}),i.createElement("span",null,n,a)),s&&_&&i.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&i.createElement(t,{className:"radio__description",size:t.sizes.small},o))});v.displayName="Radio";const M=Object.assign(v,{colors:L});var B=M;export{B as default};
 //# sourceMappingURL=radio.js.map

package/react/radio/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      isWide = true,\n      hasHover = false,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          {\n            'radio--error': error,\n            'radio--wide': isWide,\n            'radio--hover': hasHover,\n          },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAYAC,IACG,CAbH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EAAW,EAxBjB,EAeIT,EAUKU,EAAAC,EAVLX,EAUK,CATH,WACA,QACA,cACA,QACA,OACA,kBACA,QACA,SACA,aAKF,KAAM,CAACY,EAAUC,EAAWC,CAAK,EAAIpB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CACE,eAAgBsB,EAChB,cAAeN,EACf,eAAgBC,CAClB,EACAP,CACF,GAEAT,EAAA,cAAC,QAAAsB,EAAA,CACC,KAAMV,EACN,MAAOE,EACP,IAAKR,EACL,KAAK,QACL,SAAUiB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAjB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEW,EACAH,CACH,CACF,EAGCa,GAASR,GACRb,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BqB,CACH,EAGDX,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMoB,EAEF,OAAO,OAAOpB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOsB,EAAQD",
-  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "label", "name", "showCustomError", "value", "isWide", "hasHover", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Radio", "radio_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      isWide = true,\n      hasHover = false,\n      extra,\n      onChangeFunc = () => {},\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // NOTE: To not break compatibility\n      if (restProps.onChange) restProps.onChange(e);\n      onChange(e);\n      onChangeFunc(e, extra);\n    };\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          {\n            'radio--error': error,\n            'radio--wide': isWide,\n            'radio--hover': hasHover,\n          },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={onInputChange}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <Text className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </Text>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAcAC,IACG,CAfH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EAAW,GACX,MAAAC,EACA,aAAAC,EAAe,IAAM,CAAC,CA1B5B,EAeIX,EAYKY,EAAAC,EAZLb,EAYK,CAXH,WACA,QACA,cACA,QACA,OACA,kBACA,QACA,SACA,WACA,QACA,iBAKF,KAAM,CAACc,EAAUC,EAAWC,CAAK,EAAItB,EAAmB,EAElDuB,EAAiBC,GAA2C,CAE5DN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,EACVP,EAAaO,EAAGR,CAAK,CACvB,EAEA,OACEjB,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CACE,eAAgBwB,EAChB,cAAeR,EACf,eAAgBC,CAClB,EACAP,CACF,GAEAT,EAAA,cAAC,QAAA0B,EAAA,CACC,KAAMd,EACN,MAAOE,EACP,IAAKR,EACL,KAAK,QACL,SAAUkB,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAnB,EAAA,cAACE,EAAA,CAAK,UAAU,gBACdF,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEW,EACAH,CACH,CACF,EAGCe,GAASV,GACRb,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BuB,CACH,EAGDb,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMuB,EAEF,OAAO,OAAOvB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOyB,EAAQD",
+  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "label", "name", "showCustomError", "value", "isWide", "hasHover", "extra", "onChangeFunc", "restProps", "__objRest", "onChange", "onInvalid", "error", "onInputChange", "e", "__spreadValues", "Radio", "radio_default"]
 }

package/react/radio/radio.scss

@@ -9,6 +9,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  cursor: pointer;
 
   &:focus-within {
     .radio__fake-element {
@@ -107,7 +108,8 @@
   }
 
   &__label {
-    display: inline-flex;
+    display: flex;
+    align-items: center;
   }
 
   &--light {

package/react/radio/radio.types.d.ts

@@ -2,12 +2,14 @@ import { InputHtmlProps, ObjectValues } from '../types';
 export declare const colors: {
     readonly light: "radio--light";
 };
-export type Radio = {
+export type Radio<Extra = any> = {
     color?: ObjectValues<typeof colors>;
     description?: string;
     label?: string;
     name: string;
     showCustomError?: boolean;
+    extra?: Extra;
+    onChangeFunc?: (event: React.ChangeEvent<HTMLInputElement>, extra: Extra) => void;
     value: string;
     hasHover?: boolean;
     isWide?: boolean;

package/react/radio/radio.types.js

@@ -1,2 +1,2 @@
-const s={light:"radio--light"};export{s as colors};
+const r={light:"radio--light"};export{r as colors};
 //# sourceMappingURL=radio.types.js.map

package/react/radio/radio.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.types.ts"],
-  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\nexport type Radio = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  value: string;\n  hasHover?: boolean;\n  isWide?: boolean;\n} & InputHtmlProps;\n"],
+  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Radio<Extra = any> = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  extra?: Extra;\n  onChangeFunc?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    extra: Extra,\n  ) => void;\n  value: string;\n  hasHover?: boolean;\n  isWide?: boolean;\n} & InputHtmlProps;\n"],
   "mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,cACT",
   "names": ["colors"]
 }

package/react/segmented-controller/segmented-controller.js

@@ -1,2 +1,2 @@
-var f=Object.defineProperty,x=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var u=(o,e,t)=>e in o?f(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))T.call(e,t)&&u(o,t,e[t]);if(g)for(var t of g(e))$.call(e,t)&&u(o,t,e[t]);return o},a=(o,e)=>x(o,y(e));import s,{useState as z}from"react";import _ from"classnames";import p from"../text";const P=({tabs:o,onSelectionChange:e})=>{const[t,b]=z(o!=null?o:[]),r=t?t.length:0,n=t.findIndex(l=>l.isSelected),v=l=>{b(d=>d.map((m,c)=>a(i({},m),{isSelected:c===l}))),e==null||e(l)};return s.createElement("div",{className:"segmented-controller"},s.createElement("div",{className:_("segmented-controller__tabs",{[`segmented-controller__tabs--col-${r}`]:r,[`segmented-controller__tabs--selected-${n}`]:n})},s.createElement("div",{className:_("segmented-controller__indicator",{[`segmented-controller__indicator--col-${r}`]:r,[`segmented-controller__indicator--pos-${n}`]:n})}),t?t.map(({label:l,isSelected:d,leadingIcon:m,button:c},N)=>s.createElement("button",a(i({},c),{key:l,onClick:()=>v(N),type:"button",className:_("segmented-controller__tab",{"segmented-controller__tab--selected":d})}),s.createElement(p,{className:"segmented-controller__tab-title",size:p.sizes.small,theme:p.themes.emphasis},m?s.createElement("div",{className:"segmented-controller__tab-icon"},m):null,s.createElement("div",{className:"segmented-controller__tab-label"},l)))):null))};var F=P;export{F as default};
+var k=Object.defineProperty,z=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var N=(e,o,t)=>o in e?k(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))f.call(o,t)&&N(e,t,o[t]);if(c)for(var t of c(o))x.call(o,t)&&N(e,t,o[t]);return e},g=(e,o)=>z(e,P(o));var y=(e,o)=>{var t={};for(var l in e)f.call(e,l)&&o.indexOf(l)<0&&(t[l]=e[l]);if(e!=null&&c)for(var l of c(e))o.indexOf(l)<0&&x.call(e,l)&&(t[l]=e[l]);return t};import s,{useState as h}from"react";import u from"classnames";import b from"../text";const w=({tabs:e,onSelectionChange:o})=>{const[t,l]=h(e!=null?e:[]),n=t?t.length:0,m=t.findIndex(r=>r.isSelected),T=(r,i)=>{l(d=>d.map((a,_)=>g(p({},a),{isSelected:_===r}))),o==null||o(i)};return s.createElement("div",{className:"segmented-controller"},s.createElement("div",{className:u("segmented-controller__tabs",{[`segmented-controller__tabs--col-${n}`]:n,[`segmented-controller__tabs--selected-${m}`]:m})},s.createElement("div",{className:u("segmented-controller__indicator",{[`segmented-controller__indicator--col-${n}`]:n,[`segmented-controller__indicator--pos-${m}`]:m})}),t?t.map((C,$)=>{var v=C,{label:r,isSelected:i,leadingIcon:d,id:a}=v,_=y(v,["label","isSelected","leadingIcon","id"]);return s.createElement("button",g(p({},_),{key:r,onClick:()=>T($,a),type:"button",className:u("segmented-controller__tab",{"segmented-controller__tab--selected":i})}),s.createElement(b,{className:"segmented-controller__tab-title",size:b.sizes.small,theme:b.themes.emphasis},d?s.createElement("div",{className:"segmented-controller__tab-icon"},d):null,s.createElement("div",{className:"segmented-controller__tab-label"},r)))}):null))};var V=w;export{V as default};
 //# sourceMappingURL=segmented-controller.js.map

package/react/segmented-controller/segmented-controller.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/segmented-controller/segmented-controller.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(clickedIndex);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, button }, index) => (\n                <button\n                  {...button}\n                  key={label}\n                  onClick={() => changeView(index)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <div className=\"segmented-controller__tab-icon\">\n                        {leadingIcon}\n                      </div>\n                    ) : null}\n                    <div className=\"segmented-controller__tab-label\">\n                      {label}\n                    </div>\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
-  "mappings": "6aAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAcC,GAAyB,CAC3CL,EAAaM,GACXA,EAAS,IAAI,CAACH,EAAKI,IAAWC,EAAAC,EAAA,GACzBN,GADyB,CAE5B,WAAYI,IAAUF,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBO,EACtB,EAEA,OACEb,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAAC,CAAE,MAAAW,EAAO,WAAAC,EAAY,YAAAC,EAAa,OAAAC,CAAO,EAAGN,IAC3Cf,EAAA,cAAC,SAAAgB,EAAAC,EAAA,GACKI,GADL,CAEC,IAAKH,EACL,QAAS,IAAMN,EAAWG,CAAK,EAC/B,KAAK,SACL,UAAWb,EAAG,4BAA6B,CACzC,sCAAuCiB,CACzC,CAAC,IAEDnB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBiB,EACCpB,EAAA,cAAC,OAAI,UAAU,kCACZoB,CACH,EACE,KACJpB,EAAA,cAAC,OAAI,UAAU,mCACZkB,CACH,CACF,CACF,CAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOI,EAAQlB",
-  "names": ["React", "useState", "cn", "Text", "SegmentedController", "tabs", "onSelectionChange", "localTabs", "setLocalTabs", "columnCount", "selectedIndex", "tab", "changeView", "clickedIndex", "prevTabs", "index", "__spreadProps", "__spreadValues", "label", "isSelected", "leadingIcon", "button", "segmented_controller_default"]
+  "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number, id: string) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(id);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, id, ...props }, index) => (\n                <button\n                  {...props}\n                  key={label}\n                  onClick={() => changeView(index, id)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <div className=\"segmented-controller__tab-icon\">\n                        {leadingIcon}\n                      </div>\n                    ) : null}\n                    <div className=\"segmented-controller__tab-label\">\n                      {label}\n                    </div>\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
+  "mappings": "+kBAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAa,CAACC,EAAsBC,IAAe,CACvDN,EAAaO,GACXA,EAAS,IAAI,CAACJ,EAAKK,IAAWC,EAAAC,EAAA,GACzBP,GADyB,CAE5B,WAAYK,IAAUH,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBQ,EACtB,EAEA,OACEd,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAACY,EAAkDH,IAAO,CAAzD,IAAAI,EAAAD,EAAE,OAAAE,EAAO,WAAAC,EAAY,YAAAC,EAAa,GAAAT,CA1CjD,EA0CeM,EAAyCI,EAAAC,EAAzCL,EAAyC,CAAvC,QAAO,aAAY,cAAa,OACjC,OAAApB,EAAA,cAAC,SAAAiB,EAAAC,EAAA,GACKM,GADL,CAEC,IAAKH,EACL,QAAS,IAAMT,EAAWI,EAAOF,CAAE,EACnC,KAAK,SACL,UAAWZ,EAAG,4BAA6B,CACzC,sCAAuCoB,CACzC,CAAC,IAEDtB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBoB,EACCvB,EAAA,cAAC,OAAI,UAAU,kCACZuB,CACH,EACE,KACJvB,EAAA,cAAC,OAAI,UAAU,mCACZqB,CACH,CACF,CACF,EAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOK,EAAQtB",
+  "names": ["React", "useState", "cn", "Text", "SegmentedController", "tabs", "onSelectionChange", "localTabs", "setLocalTabs", "columnCount", "selectedIndex", "tab", "changeView", "clickedIndex", "id", "prevTabs", "index", "__spreadProps", "__spreadValues", "_a", "_b", "label", "isSelected", "leadingIcon", "props", "__objRest", "segmented_controller_default"]
 }

package/react/segmented-controller/segmented-controller.types.d.ts

@@ -1,11 +1,13 @@
 import type { ReactElement } from 'react';
 import type { ButtonHtmlProps } from '../types';
+type SegmentedTab = {
+    label: string;
+    isSelected: boolean;
+    id: string;
+    leadingIcon?: ReactElement;
+} & ButtonHtmlProps;
 export type SegmentedController = {
-    onSelectionChange?: (index: number) => void;
-    tabs: {
-        label: string;
-        isSelected: boolean;
-        leadingIcon?: ReactElement;
-        button?: ButtonHtmlProps;
-    }[];
+    onSelectionChange?: (id: string) => void;
+    tabs: SegmentedTab[];
 };
+export {};

package/tokens/primitives.scss

@@ -1,5 +1,5 @@
-/* Mode 1 */
-/* color */
+// Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/%F0%9F%8E%A8-sats-ds-styles?type=design&node-id=8481%3A40159&mode=design&t=4Gq1pqiSLpmo4bBj-1
+
 $black-10: #e5e5e5;
 $black-100: #000000;
 $black-20: #cccccc;