@mrshmllw/smores-react 9.1.4 → 9.2.0

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Color } from '../theme';
+export type SegmentedControlOption<T = string | number> = {
+    label: string;
+    /** value needs to be number or string */
+    value: T;
+    /** optional tag able to show in the toggle if showTag prop is passed */
+    tag?: string;
+    isDisabled?: boolean;
+};
+type StylingOptions = {
+    toggle?: Color;
+    background?: Color;
+    text?: Color;
+    selectedText?: Color;
+    tagBg?: Color;
+    tagBorder?: Color;
+    tagText?: Color;
+};
+export type SegmentedControlProps<T> = {
+    /** you can pass more than 2 options */
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /**  pass this prop if you want to show the tag in the toggle */
+    showTag?: boolean;
+    /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */
+    styles?: StylingOptions;
+};
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, }, }: SegmentedControlProps<T>) => JSX.Element;
+export {};

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { Tag } from '../Tag';
+import { Text } from '../Text';
+import React from 'react';
+import { ToggleButton } from './ToggleButton';
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export const SegmentedControl = ({ options, value, onChange, showTag, styles: { tagBorder = 'marshmallowPink', tagText = 'cream', tagBg = 'marshmallowPink', selectedText = 'cream', text = 'liquorice', background, toggle, } = {}, }) => {
+    return (React.createElement(ToggleWrapper, { backgroundColor: background },
+        React.createElement(IndicatorWrapper, { backgroundColor: background },
+            options.map((option) => {
+                return (React.createElement(ToggleButton, { key: option.label, name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: option.value === value, isDisabled: option.isDisabled },
+                    React.createElement(StyledWrapper, null,
+                        showTag && option.tag && (React.createElement(StyledTag, { bgColor: tagBg, borderColor: tagBorder, color: tagText, label: option.tag })),
+                        React.createElement(StyledText, { isSelected: option.value === value, selectedTextColor: selectedText, color: text }, option.label))));
+            }),
+            React.createElement(ToggleIndicator, { selectedIndex: options.findIndex((option) => option.value === value), sections: options.length, toggleColor: toggle }))));
+};
+const BORDER_RADIUS = 25;
+const StyledWrapper = styled(Box) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+const StyledTag = styled(Tag) `
+  border-radius: 100px;
+`;
+const StyledText = styled(Text) `
+  font-weight: ${theme.font.weight.medium};
+  ${({ isSelected, selectedTextColor }) => isSelected && `color: ${theme.colors[selectedTextColor]};`}
+  padding: 2px 0px;
+`;
+const ToggleWrapper = styled(Box) `
+  padding: 4px;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const IndicatorWrapper = styled(Box) `
+  position: relative;
+  display: flex;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const ToggleIndicator = styled(Box) `
+  background-color: ${(p) => theme.colors[p.toggleColor ?? 'liquorice']};
+  border-radius: ${BORDER_RADIUS}px;
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: ${(p) => `calc(100% / ${p.sections})`};
+  transition: transform 0.4s;
+  transform: ${(p) => `translateX(${p.selectedIndex * 100}%)`};
+`;
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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"}

package/dist/SegmentedControl/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type ToggleButtonProps<Value> = {
+    name: string;
+    value: Value;
+    onChange: (value: Value) => void;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    children: ReactNode;
+};
+export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => JSX.Element;
+export {};

package/dist/SegmentedControl/ToggleButton.js

@@ -0,0 +1,32 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled, { css } from 'styled-components';
+export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
+    return (React.createElement(Wrapper, { as: "label", "data-testId": `value-toggle-${value}`, isDisabled: isDisabled },
+        React.createElement(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }),
+        children));
+};
+const Wrapper = styled(Box) `
+  cursor: pointer;
+  ${({ isDisabled }) => isDisabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+  padding: 10px 14px;
+  transition: color 0.1s linear;
+  height: fit-content;
+  width: 100%;
+  align-content: center;
+  z-index: 3;
+`;
+const VisuallyHiddenInput = styled.input `
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+//# sourceMappingURL=ToggleButton.js.map

package/dist/SegmentedControl/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAW/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,KAAK,EAAE,EACpC,UAAU,EAAE,UAAU;QAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA"}

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/dist/SegmentedControl/index.js

@@ -0,0 +1,2 @@
+export * from './SegmentedControl';
+//# sourceMappingURL=index.js.map

package/dist/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/index.d.ts

@@ -43,3 +43,4 @@ export * from './theme';
 export * from './utils/space';
 export * from './RichText';
 export * from './RichTextEditor';
+export * from './SegmentedControl';

package/dist/index.js

@@ -43,4 +43,5 @@ export * from './theme';
 export * from './utils/space';
 export * from './RichText';
 export * from './RichTextEditor';
+export * from './SegmentedControl';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "9.1.4",
+  "version": "9.2.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [