@dotss/ui 0.0.4 → 0.0.7

package/dist/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),d=require("react"),u=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),p=require("@emotion/styled"),g=require("../../utils/getContrastingTextColor/getContrastingTextColor.cjs"),h=e=>e&&e.__esModule?e:{default:e},l=h(p),f=l.default.div`
+  flex-basis: calc((100% / 3) - ${({theme:{spacing:e}})=>e.content(3)}px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`,m=l.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
+  color: ${({theme:{palette:{brand:e,grey:t}}})=>g.default(e.primary.main,[t.white,t[100]])};
+  & svg {
+    color: inherit;
+  }
+
+  ${({theme:{typography:{h0B:e,h2B:t}},size:r})=>{let i={width:60,height:60,fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,"& > svg":{width:32,height:32}};return r==="large"&&(i={width:80,height:80,fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing,"& > svg":{width:36,height:36}}),i}};
+
+  ${({theme:{palette:{brand:e}},isHoverPossible:t})=>t?{"&:hover:not([disabled])":{backgroundColor:e.primary.press}}:{}}
+
+  &:active:not([disabled]) {
+    background-color: ${({theme:{palette:{brand:e}}})=>e.primary.press};
+  }
+
+  &:disabled {
+    background-color: ${({theme:{palette:{brand:e}}})=>e.primary.disable};
+    color: ${({theme:{palette:{grey:e}}})=>e[30]};
+    cursor: not-allowed;
+  }
+`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;

package/dist/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+import { NumberKeypadProps } from '../NumberKeypad';
+
+export interface NumberKeypadBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>> {
+    value?: string | number;
+}
+declare const NumberKeypadBlock: import('react').ForwardRefExoticComponent<NumberKeypadBlockProps & import('react').RefAttributes<HTMLDivElement>>;
+export default NumberKeypadBlock;

package/dist/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js

@@ -0,0 +1,106 @@
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { forwardRef as p } from "react";
+import d from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import n from "@emotion/styled";
+import h from "../../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const m = n.div`
+  flex-basis: calc((100% / 3) - ${({ theme: { spacing: e } }) => e.content(3)}px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`, g = n.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: ${({
+  theme: {
+    palette: { brand: e }
+  }
+}) => e.primary.main};
+  color: ${({
+  theme: {
+    palette: { brand: e, grey: t }
+  }
+}) => h(e.primary.main, [t.white, t[100]])};
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+  theme: {
+    typography: { h0B: e, h2B: t }
+  },
+  size: r
+}) => {
+  let i = {
+    width: 60,
+    height: 60,
+    fontSize: t.size,
+    fontWeight: t.weight,
+    lineHeight: t.lineHeight,
+    letterSpacing: t.letterSpacing,
+    "& > svg": {
+      width: 32,
+      height: 32
+    }
+  };
+  return r === "large" && (i = {
+    width: 80,
+    height: 80,
+    fontSize: e.size,
+    fontWeight: e.weight,
+    lineHeight: e.lineHeight,
+    letterSpacing: e.letterSpacing,
+    "& > svg": {
+      width: 36,
+      height: 36
+    }
+  }), i;
+}};
+
+  ${({
+  theme: {
+    palette: { brand: e }
+  },
+  isHoverPossible: t
+}) => t ? {
+  "&:hover:not([disabled])": {
+    backgroundColor: e.primary.press
+  }
+} : {}}
+
+  &:active:not([disabled]) {
+    background-color: ${({
+  theme: {
+    palette: { brand: e }
+  }
+}) => e.primary.press};
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme: {
+    palette: { brand: e }
+  }
+}) => e.primary.disable};
+    color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[30]};
+    cursor: not-allowed;
+  }
+`, v = p(
+  function({ children: t, size: r, disabled: i, inlineCSS: l, ...a }, s) {
+    const { isHoverPossible: c } = d();
+    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(g, { size: r, disabled: i, isHoverPossible: c, children: t }) });
+  }
+);
+export {
+  v as default
+};

package/dist/NumberKeypad/NumberKeypadBlock/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./NumberKeypadBlock.cjs");exports.default=e.default;

package/dist/NumberKeypad/NumberKeypadBlock/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NumberKeypadBlock } from './NumberKeypadBlock';
+
+export default NumberKeypadBlock;

package/dist/NumberKeypad/NumberKeypadBlock/index.es.js

@@ -0,0 +1,4 @@
+import o from "./NumberKeypadBlock.es.js";
+export {
+  o as default
+};

package/dist/NumberKeypad/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./NumberKeypad.cjs"),u=require("./NumberKeypadBlock/NumberKeypadBlock.cjs");exports.default=e.default;exports.NumberKeypadBlock=u.default;

package/dist/NumberKeypad/index.d.ts

@@ -0,0 +1,4 @@
+import { default as NumberKeypad } from './NumberKeypad';
+
+export { default as NumberKeypadBlock } from './NumberKeypadBlock';
+export default NumberKeypad;

package/dist/NumberKeypad/index.es.js

@@ -0,0 +1,6 @@
+import r from "./NumberKeypad.es.js";
+import { default as m } from "./NumberKeypadBlock/NumberKeypadBlock.es.js";
+export {
+  m as NumberKeypadBlock,
+  r as default
+};

package/dist/PageControl/PageControl.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),f=require("react"),g=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},n=m(g),y=n.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+`,h=n.default.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${({theme:{palette:{grey:e}},color:t})=>t==="primary"?e[10]:e[30]};
+  cursor: pointer;
+  transition: all 150ms ease;
+  transition-property: width, border-radius, background-color, cursor;
+
+  ${({theme:{palette:{brand:e}},color:t,isActive:r})=>r?{width:24,borderRadius:8,backgroundColor:t==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
+`,b=f.forwardRef(function({totalCount:t=1,page:r=1,onChange:a,color:s="primary",inlineCSS:u,...c},d){const p=l=>{typeof a=="function"&&a(Number(l.currentTarget.dataset.page))};return i.jsx(y,{ref:d,...c,css:u,children:Array.from({length:t},(l,o)=>i.jsx(h,{isActive:o+1===r,color:s,"data-page":o+1,onClick:p},o))})});exports.default=b;

package/dist/PageControl/PageControl.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface PageControlProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick'>> {
+    totalCount?: number;
+    page?: number;
+    color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
+    onChange?: (page: number) => void;
+}
+declare const PageControl: import('react').ForwardRefExoticComponent<PageControlProps & import('react').RefAttributes<HTMLDivElement>>;
+export default PageControl;

package/dist/PageControl/PageControl.es.js

@@ -0,0 +1,51 @@
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
+import p from "@emotion/styled";
+const f = p.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: r } }) => r.content(2)}px;
+`, g = p.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: ${({
+  theme: {
+    palette: { grey: r }
+  },
+  color: t
+}) => t === "primary" ? r[10] : r[30]};
+  cursor: pointer;
+  transition: all 150ms ease;
+  transition-property: width, border-radius, background-color, cursor;
+
+  ${({
+  theme: {
+    palette: { brand: r }
+  },
+  color: t,
+  isActive: o
+}) => o ? {
+  width: 24,
+  borderRadius: 8,
+  backgroundColor: t === "primary" ? r.primary.pageControl : r.primary.tooltip,
+  cursor: "default"
+} : null}
+`, C = u(function({ totalCount: t = 1, page: o = 1, onChange: a, color: l = "primary", inlineCSS: s, ...c }, d) {
+  const m = (i) => {
+    typeof a == "function" && a(Number(i.currentTarget.dataset.page));
+  };
+  return /* @__PURE__ */ n(f, { ref: d, ...c, css: s, children: Array.from({ length: t }, (i, e) => /* @__PURE__ */ n(
+    g,
+    {
+      isActive: e + 1 === o,
+      color: l,
+      "data-page": e + 1,
+      onClick: m
+    },
+    e
+  )) });
+});
+export {
+  C as default
+};

package/dist/PageControl/PageControl.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./PageControl').PageControlProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/PageControl/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./PageControl.cjs");exports.default=e.default;

package/dist/PageControl/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PageControl } from './PageControl';
+
+export default PageControl;

package/dist/PageControl/index.es.js

@@ -0,0 +1,4 @@
+import r from "./PageControl.es.js";
+export {
+  r as default
+};

package/dist/Radio/Radio.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),f=require("react"),y=require("@emotion/styled"),m=require("../core/useTheme.cjs"),c=t=>t&&t.__esModule?t:{default:t},p=c(y),C=p.default.span`
+  position: relative;
+  display: inline-flex;
+`,x=p.default.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;function g({size:t,color:i="primary",checked:s,disabled:n}){const{palette:{brand:r,grey:e,background:d}}=m.default();let l=e.white,u=e[50],o=e[10];return s&&(l=i==="primary"?r.primary.main:r[i],u=i==="primary"?r.primary.main:r[i],o=i==="primary"?e.white:e[10]),!s&&n&&(l=d.primary,u=e[30],o=e[20]),s&&n&&(l=i==="primary"?r.primary.disable:e[30],u=i==="primary"?r.primary.disable:e[30],o=i==="primary"?e.white:e[10]),a.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",children:[a.jsx("path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",fill:l}),a.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",fill:u}),a.jsx("circle",{cx:"12",cy:"12",r:"4",fill:o})]})}const h=f.forwardRef(function({size:i="medium",color:s="primary",checked:n,disabled:r,inlineCSS:e,...d},l){return a.jsxs(C,{ref:l,css:e,children:[a.jsx(x,{type:"radio",checked:n,disabled:r,...d}),a.jsx(g,{size:i,color:s,checked:n,disabled:r})]})});exports.default=h;

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface RadioProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
+    size?: Extract<Size, 'medium' | '2xLarge'>;
+    color?: BrandColorKey;
+}
+declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Radio;

package/dist/Radio/Radio.es.js

@@ -0,0 +1,69 @@
+import { jsxs as s, jsx as o } from "@emotion/react/jsx-runtime";
+import { forwardRef as y } from "react";
+import f from "@emotion/styled";
+import u from "../core/useTheme.es.js";
+const C = f.span`
+  position: relative;
+  display: inline-flex;
+`, h = f.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+function w({
+  size: m,
+  color: r = "primary",
+  checked: a,
+  disabled: p
+}) {
+  const {
+    palette: { brand: t, grey: i, background: d }
+  } = u();
+  let e = i.white, l = i[50], n = i[10];
+  return a && (e = r === "primary" ? t.primary.main : t[r], l = r === "primary" ? t.primary.main : t[r], n = r === "primary" ? i.white : i[10]), !a && p && (e = d.primary, l = i[30], n = i[20]), a && p && (e = r === "primary" ? t.primary.disable : i[30], l = r === "primary" ? t.primary.disable : i[30], n = r === "primary" ? i.white : i[10]), /* @__PURE__ */ s(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: m === "2xLarge" ? 48 : 24,
+      height: m === "2xLarge" ? 48 : 24,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            d: "M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
+            fill: e
+          }
+        ),
+        /* @__PURE__ */ o(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+            fill: l
+          }
+        ),
+        /* @__PURE__ */ o("circle", { cx: "12", cy: "12", r: "4", fill: n })
+      ]
+    }
+  );
+}
+const b = y(function({ size: r = "medium", color: a = "primary", checked: p, disabled: t, inlineCSS: i, ...d }, e) {
+  return /* @__PURE__ */ s(C, { ref: e, css: i, children: [
+    /* @__PURE__ */ o(h, { type: "radio", checked: p, disabled: t, ...d }),
+    /* @__PURE__ */ o(w, { size: r, color: a, checked: p, disabled: t })
+  ] });
+});
+export {
+  b as default
+};

package/dist/Radio/Radio.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Radio').RadioProps & import('react').RefAttributes<HTMLSpanElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/Radio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Radio.cjs");exports.default=e.default;

package/dist/Radio/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Radio } from './Radio';
+
+export default Radio;

package/dist/Radio/index.es.js

@@ -0,0 +1,4 @@
+import a from "./Radio.es.js";
+export {
+  a as default
+};

package/dist/SegmentedButton/SegmentedButton.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@emotion/react/jsx-runtime"),n=require("react"),m=require("@emotion/styled"),x=e=>e&&e.__esModule?e:{default:e},b=x(m),j=b.default.div`
+  display: flex;
+  align-items: center;
+  height: 44px;
+
+  ${({fullWidth:e})=>e?{width:"100%","& > button":{width:"100%",flexShrink:1}}:null}
+`,k=n.forwardRef(function({children:u,variant:d="outlined",color:c="primary",rounded:a=!0,onChange:r,value:f,fullWidth:p,inlineCSS:y,disabled:_,...g},h){const v=(t,i)=>o=>{typeof r=="function"&&r(t),typeof i=="function"&&i(o)};return S.jsx(j,{ref:h,fullWidth:p,...g,css:y,children:n.Children.map(u,(t,i)=>{var o,s,l;return n.isValidElement(t)?n.cloneElement(t,{...t.props,variant:d,color:c,rounded:a,disabled:_,isActive:f===((o=t.props)==null?void 0:o.value),isFirst:i===0,isLast:n.Children.count(u)-1===i,onClick:v((s=t.props)==null?void 0:s.value,(l=t.props)==null?void 0:l.onClick)}):null})})});exports.default=k;

package/dist/SegmentedButton/SegmentedButton.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactElement } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps, Variant } from '../typings/component';
+import { default as SegmentedButtonBlock } from './SegmentedButtonBlock';
+
+export interface SegmentedButtonProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    variant?: Extract<Variant, 'solid' | 'outlined'>;
+    color?: Extract<BrandColorKey, 'primary' | 'secondary'>;
+    onChange?: (value?: string | number) => void;
+    value?: string | number;
+    fullWidth?: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    children?: ReactElement<typeof SegmentedButtonBlock> | ReactElement<typeof SegmentedButtonBlock>[];
+}
+declare const SegmentedButton: import('react').ForwardRefExoticComponent<SegmentedButtonProps & import('react').RefAttributes<HTMLDivElement>>;
+export default SegmentedButton;

package/dist/SegmentedButton/SegmentedButton.es.js

@@ -0,0 +1,48 @@
+import { jsx as x } from "@emotion/react/jsx-runtime";
+import { forwardRef as S, Children as u, isValidElement as k, cloneElement as w } from "react";
+import B from "@emotion/styled";
+const C = B.div`
+  display: flex;
+  align-items: center;
+  height: 44px;
+
+  ${({ fullWidth: r }) => r ? {
+  width: "100%",
+  "& > button": {
+    width: "100%",
+    flexShrink: 1
+  }
+} : null}
+`, A = S(function({
+  children: n,
+  variant: f = "outlined",
+  color: l = "primary",
+  rounded: d = !0,
+  onChange: s,
+  value: c,
+  fullWidth: a,
+  inlineCSS: m,
+  disabled: y,
+  ...h
+}, g) {
+  const v = (t, o) => (i) => {
+    typeof s == "function" && s(t), typeof o == "function" && o(i);
+  };
+  return /* @__PURE__ */ x(C, { ref: g, fullWidth: a, ...h, css: m, children: u.map(n, (t, o) => {
+    var i, e, p;
+    return k(t) ? w(t, {
+      ...t.props,
+      variant: f,
+      color: l,
+      rounded: d,
+      disabled: y,
+      isActive: c === ((i = t.props) == null ? void 0 : i.value),
+      isFirst: o === 0,
+      isLast: u.count(n) - 1 === o,
+      onClick: v((e = t.props) == null ? void 0 : e.value, (p = t.props) == null ? void 0 : p.onClick)
+    }) : null;
+  }) });
+});
+export {
+  A as default
+};

package/dist/SegmentedButton/SegmentedButton.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./SegmentedButton').SegmentedButtonProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Outlined: Story;
+export declare const Solid: Story;
+export declare const FullWidth: Story;
+export declare const Rounded: Story;
+export declare const WithLabel: Story;

package/dist/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.cjs

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),g=require("react"),m=require("@emotion/styled"),b=e=>e&&e.__esModule?e:{default:e},l=b(m),x=l.default.button`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 ${({theme:{spacing:e}})=>e.content(4)}px;
+  border: 1px solid transparent;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[10]};
+
+  ${({theme:{palette:{brand:e,grey:t}},variant:o,color:r,isActive:d})=>{let n=null;switch(o){case"outlined":n={marginRight:-1,borderColor:t[30]},r==="primary"&&d&&(n={...n,backgroundColor:e.primary.disableLine,borderColor:e.primary.line,zIndex:1}),r==="secondary"&&d&&(n={...n,backgroundColor:t.white,borderColor:t[100],zIndex:1});break}return n}};
+
+  ${({isFirst:e,isLast:t})=>{let o=null;return e&&(o={borderTopLeftRadius:8,borderBottomLeftRadius:8}),t&&(o={borderTopRightRadius:8,borderBottomRightRadius:8}),o}};
+
+  ${({rounded:e})=>e?null:{borderRadius:0}};
+
+  &:disabled {
+    ${({theme:{palette:{grey:e,background:t}},variant:o})=>{let r={cursor:"default"};return o==="outlined"&&(r={...r,backgroundColor:t.primary,borderColor:e[30],"& > div":{color:e[30]}}),o==="solid"&&(r={...r,"& > div":{color:e[30]}}),r}};
+  }
+`,y=l.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  ${({theme:{palette:{grey:e},typography:{b4M:t}},isActive:o})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,color:o?void 0:e[70]})};
+`,j=l.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:e}})=>e.content(1)}px;
+`,k=l.default.span`
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 20px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[30]};
+`,R=l.default.span`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 4px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.black};
+`,$=g.forwardRef(function({variant:t="outlined",color:o="primary",text:r,label:d,isFirst:n,isLast:a,isActive:s,rounded:u=!0,disabled:c,inlineCSS:p,...f},h){return i.jsxs(x,{ref:h,variant:t,color:o,rounded:u,isFirst:n,isLast:a,isActive:s,disabled:c,...f,css:p,children:[i.jsxs(y,{isActive:s,children:[i.jsxs(j,{children:[r,d]}),t==="solid"&&s&&!c&&i.jsx(R,{})]}),t==="solid"&&!a&&i.jsx(k,{})]})});exports.default=$;

package/dist/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.d.ts

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+import { SegmentedButtonProps } from '../SegmentedButton';
+
+export interface SegmentedButtonBlockProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement> & Pick<SegmentedButtonProps, 'variant' | 'color' | 'rounded'>> {
+    text: string;
+    value: string;
+    label?: ReactNode;
+    isFirst?: boolean;
+    isLast?: boolean;
+    isActive?: boolean;
+}
+declare const SegmentedButtonBlock: import('react').ForwardRefExoticComponent<SegmentedButtonBlockProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default SegmentedButtonBlock;