@soul-refiner/design-system 0.2.57 → 0.2.59

package/dist/components/input/index.d.ts

@@ -8,5 +8,7 @@ export { Radio } from './radio';
 export type { RadioProps } from './radio';
 export { Search } from './search';
 export type { SearchProps } from './search';
+export { Select } from './select';
+export type { SelectProps } from './select';
 export { TextInput } from './text_input';
 export type { TextInputProps } from './text_input';

package/dist/components/input/index.js

@@ -3,4 +3,5 @@ export { DatePicker } from './date';
 export { Filter } from './filter';
 export { Radio } from './radio';
 export { Search } from './search';
+export { Select } from './select';
 export { TextInput } from './text_input';

package/dist/components/input/select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './select';
+export type { SelectProps } from './select';

package/dist/components/input/select/index.js

@@ -0,0 +1 @@
+export { Select } from './select';

package/dist/components/input/select/select.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface SelectProps {
+    label: string | React.ReactNode;
+    onClick: (event: React.MouseEvent) => void;
+    selected: boolean;
+    sx?: string;
+    value: string;
+}
+export declare const Select: ({ label, onClick, selected, sx, value, }: SelectProps) => React.JSX.Element;

package/dist/components/input/select/select.js

@@ -0,0 +1,46 @@
+'use client';
+import { P } from 'components/atoms/typography/paragraph';
+import React from 'react';
+import styled from 'styled-components';
+export const Select = ({ label, onClick, selected, sx, value, }) => {
+    return (React.createElement(Label, { onClick: onClick, "$sx": sx },
+        React.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
+        React.createElement(SelectBox, { "$selected": selected }),
+        React.createElement(P, { as: "div" }, label)));
+};
+const Label = styled.div `
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 24px;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    display: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const SelectBox = styled.div `
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 4px;
+
+  ${({ $selected }) => $selected
+    ? `
+    background-color: var(--color-primary-blue-2);
+    border-color: var(--color-primary-blue-2);
+    
+    &::after {
+      position: absolute;
+      content: '✔';
+      top: -1px;
+      left: 4px;
+      font-size: 13px;
+      color: var(--color-white);
+      font-weight: 500;
+    }`
+    : ''}
+`;

package/dist/components/surfaces/modal/modal.d.ts

@@ -23,7 +23,7 @@ declare const Modal: {
     Dismiss: {
         ({ children: child, setClosed, }: {
             children: React.ReactElement;
-            setClosed?: (() => void) | undefined;
+            setClosed?: ((event?: React.MouseEvent) => void) | undefined;
         }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         displayName: string;
     };

package/dist/components/surfaces/modal/modal.js

@@ -34,7 +34,10 @@ const ModalTrigger = ({ children: child, }) => {
     const [, setOpen] = React.useContext(ModalContext);
     return (child &&
         React.cloneElement(child, {
-            onClick: callAll(() => setOpen(true), child.props.onClick),
+            onClick: callAll(() => setOpen(true), child.props.onClick, (event) => {
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
         }));
 };
 ModalTrigger.displayName = 'Modal.Trigger';
@@ -43,7 +46,11 @@ const ModalDismiss = ({ children: child, setClosed, }) => {
     const [, setOpen] = React.useContext(ModalContext);
     return (child &&
         React.cloneElement(child, {
-            onClick: callAll(() => setOpen(false), child.props.onClick, () => setClosed && setClosed()),
+            onClick: callAll(() => setOpen(false), child.props.onClick, (event) => {
+                setClosed && setClosed();
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
         }));
 };
 ModalDismiss.displayName = 'Modal.Dismiss';
@@ -54,6 +61,7 @@ const ModalContent = ({ backgroundDark = true, children, footer, header, setClos
         if (event.currentTarget != event.target)
             return;
         event.stopPropagation();
+        event.preventDefault();
         setClosed ? setClosed() : setOpen(false);
     };
     return (React.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.57",
+  "version": "0.2.59",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {