@ultraviolet/ui 1.88.0 → 1.89.0

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

@@ -0,0 +1,45 @@
+import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react';
+import { Label } from '../Label';
+import { Option } from './components/Option';
+import type { Sizes } from './types';
+type SelectableCardOptionGroupProps = {
+    legend?: string;
+    legendDescription?: ReactNode;
+    className?: string;
+    required?: boolean;
+    columns?: number;
+    children: ReactNode;
+    helper?: ReactNode;
+    error?: ReactNode;
+    /**
+     * The value that is selected among selectable card options.
+     */
+    value?: ComponentProps<typeof Option>['value'];
+    /**
+     * The value that is selected among select input options.
+     */
+    optionValue?: ComponentProps<typeof Option>['optionValue'];
+    onChangeOption: (value: string) => void;
+    disabled?: boolean;
+    size?: Sizes;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'name'>;
+/**
+ * SelectableCardOptionGroup gives you a group of SelectInput within a SelectableCard component.
+ * It's an input that provide the choice of one value and sub options to choose from.
+ *
+ * **Be aware that once you click on the component, the first value of options will be selected by default.**
+ */
+export declare const SelectableCardOptionGroup: {
+    ({ legend, legendDescription, className, required, columns, children, helper, error, onChange, value, optionValue, onChangeOption, name, disabled, size, }: SelectableCardOptionGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, image, disabled, id, }: Omit<import("../SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
+        value: string;
+        className?: string;
+        children?: ReactNode;
+        options: ComponentProps<typeof import("..").SelectInputV2>["options"];
+        optionValue?: ComponentProps<typeof import("..").SelectInputV2>["value"];
+        image?: ReactNode;
+        labelDescription?: ComponentProps<typeof Label>["labelDescription"];
+        id?: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/SelectableCardOptionGroup/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
+import { useMemo } from "react";
+import { Label } from "../Label/index.js";
+import { Row } from "../Row/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { SelectableCardOptionGroupContext } from "./Provider.js";
+import { Option } from "./components/Option.js";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const FieldSet = /* @__PURE__ */ _styled("fieldset", process.env.NODE_ENV === "production" ? {
+  target: "eomr2n30"
+} : {
+  target: "eomr2n30",
+  label: "FieldSet"
+})(process.env.NODE_ENV === "production" ? {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0"
+} : {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXAvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9TZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBDb21wb25lbnRQcm9wcywgSW5wdXRIVE1MQXR0cmlidXRlcywgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBMYWJlbCB9IGZyb20gJy4uL0xhYmVsJ1xuaW1wb3J0IHsgUm93IH0gZnJvbSAnLi4vUm93J1xuaW1wb3J0IHsgU3RhY2sgfSBmcm9tICcuLi9TdGFjaydcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuaW1wb3J0IHsgU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cENvbnRleHQgfSBmcm9tICcuL1Byb3ZpZGVyJ1xuaW1wb3J0IHsgT3B0aW9uIH0gZnJvbSAnLi9jb21wb25lbnRzL09wdGlvbidcbmltcG9ydCB0eXBlIHsgU2l6ZXMgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBGaWVsZFNldCA9IHN0eWxlZC5maWVsZHNldGBcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG5gXG5cbnR5cGUgU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cFByb3BzID0ge1xuICBsZWdlbmQ/OiBzdHJpbmdcbiAgbGVnZW5kRGVzY3JpcHRpb24/OiBSZWFjdE5vZGVcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHJlcXVpcmVkPzogYm9vbGVhblxuICBjb2x1bW5zPzogbnVtYmVyXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgaGVscGVyPzogUmVhY3ROb2RlXG4gIGVycm9yPzogUmVhY3ROb2RlXG4gIC8qKlxuICAgKiBUaGUgdmFsdWUgdGhhdCBpcyBzZWxlY3RlZCBhbW9uZyBzZWxlY3RhYmxlIGNhcmQgb3B0aW9ucy5cbiAgICovXG4gIHZhbHVlPzogQ29tcG9uZW50UHJvcHM8dHlwZW9mIE9wdGlvbj5bJ3ZhbHVlJ11cbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSB0aGF0IGlzIHNlbGVjdGVkIGFtb25nIHNlbGVjdCBpbnB1dCBvcHRpb25zLlxuICAgKi9cbiAgb3B0aW9uVmFsdWU/OiBDb21wb25lbnRQcm9wczx0eXBlb2YgT3B0aW9uPlsnb3B0aW9uVmFsdWUnXVxuICBvbkNoYW5nZU9wdGlvbjogKHZhbHVlOiBzdHJpbmcpID0+IHZvaWRcbiAgZGlzYWJsZWQ/OiBib29sZWFuXG4gIHNpemU/OiBTaXplc1xufSAmIFJlcXVpcmVkPFBpY2s8SW5wdXRIVE1MQXR0cmlidXRlczxIVE1MSW5wdXRFbGVtZW50PiwgJ29uQ2hhbmdlJz4+ICZcbiAgUGljazxJbnB1dEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+LCAnbmFtZSc+XG5cbi8qKlxuICogU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cCBnaXZlcyB5b3UgYSBncm91cCBvZiBTZWxlY3RJbnB1dCB3aXRoaW4gYSBTZWxlY3RhYmxlQ2FyZCBjb21wb25lbnQuXG4gKiBJdCdzIGFuIGlucHV0IHRoYXQgcHJvdmlkZSB0aGUgY2hvaWNlIG9mIG9uZSB2YWx1ZSBhbmQgc3ViIG9wdGlvbnMgdG8gY2hvb3NlIGZyb20uXG4gKlxuICogKipCZSBhd2FyZSB0aGF0IG9uY2UgeW91IGNsaWNrIG9uIHRoZSBjb21wb25lbnQsIHRoZSBmaXJzdCB2YWx1ZSBvZiBvcHRpb25zIHdpbGwgYmUgc2VsZWN0ZWQgYnkgZGVmYXVsdC4qKlxuICovXG5leHBvcnQgY29uc3QgU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cCA9ICh7XG4gIGxlZ2VuZCxcbiAgbGVnZW5kRGVzY3JpcHRpb24sXG4gIGNsYXNzTmFtZSxcbiAgcmVxdWlyZWQsXG4gIGNvbHVtbnMgPSAzLFxuICBjaGlsZHJlbixcbiAgaGVscGVyLFxuICBlcnJvcixcbiAgb25DaGFuZ2UsXG4gIHZhbHVlLFxuICBvcHRpb25WYWx1ZSxcbiAgb25DaGFuZ2VPcHRpb24sXG4gIG5hbWUsXG4gIGRpc2FibGVkLFxuICBzaXplID0gJ2xhcmdlJyxcbn06IFNlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXBQcm9wcykgPT4ge1xuICBjb25zdCBjb250ZXh0VmFsdWUgPSB1c2VNZW1vKFxuICAgICgpID0+ICh7XG4gICAgICBncm91cE5hbWU6IG5hbWUsXG4gICAgICBncm91cFZhbHVlOiB2YWx1ZSxcbiAgICAgIG9uQ2hhbmdlLFxuICAgICAgb25DaGFuZ2VPcHRpb24sXG4gICAgICBvcHRpb25WYWx1ZSxcbiAgICAgIHJlcXVpcmVkLFxuICAgICAgZGlzYWJsZWQsXG4gICAgICBlcnJvcjogISFlcnJvcixcbiAgICAgIHNpemUsXG4gICAgfSksXG4gICAgW1xuICAgICAgZGlzYWJsZWQsXG4gICAgICBlcnJvcixcbiAgICAgIG5hbWUsXG4gICAgICBvbkNoYW5nZSxcbiAgICAgIG9uQ2hhbmdlT3B0aW9uLFxuICAgICAgb3B0aW9uVmFsdWUsXG4gICAgICByZXF1aXJlZCxcbiAgICAgIHZhbHVlLFxuICAgICAgc2l6ZSxcbiAgICBdLFxuICApXG5cbiAgcmV0dXJuIChcbiAgICA8U2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cENvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2NvbnRleHRWYWx1ZX0+XG4gICAgICA8U3RhY2sgZ2FwPXsxfT5cbiAgICAgICAgPEZpZWxkU2V0IGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgICAgICA8U3RhY2sgZ2FwPXsxLjV9PlxuICAgICAgICAgICAge2xlZ2VuZCA/IChcbiAgICAgICAgICAgICAgPExhYmVsXG4gICAgICAgICAgICAgICAgYXM9XCJsZWdlbmRcIlxuICAgICAgICAgICAgICAgIHJlcXVpcmVkPXtyZXF1aXJlZH1cbiAgICAgICAgICAgICAgICBsYWJlbERlc2NyaXB0aW9uPXtsZWdlbmREZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtsZWdlbmR9XG4gICAgICAgICAgICAgIDwvTGFiZWw+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgIDxSb3cgZ2FwPXsyfSB0ZW1wbGF0ZUNvbHVtbnM9e2ByZXBlYXQoJHtjb2x1bW5zfSwgbWlubWF4KDAsIDFmcikpYH0+XG4gICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDwvUm93PlxuICAgICAgICAgIDwvU3RhY2s+XG4gICAgICAgIDwvRmllbGRTZXQ+XG4gICAgICAgIHsoZXJyb3IgJiYgdHlwZW9mIGVycm9yID09PSAnc3RyaW5nJykgfHwgaGVscGVyID8gKFxuICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICBhcz1cInNwYW5cIlxuICAgICAgICAgICAgdmFyaWFudD1cImNhcHRpb25cIlxuICAgICAgICAgICAgcHJvbWluZW5jZT1cIndlYWtcIlxuICAgICAgICAgICAgc2VudGltZW50PXtlcnJvciA/ICdkYW5nZXInIDogJ25ldXRyYWwnfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtoZWxwZXIgfHwgZXJyb3J9XG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICApIDogbnVsbH1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9TZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwQ29udGV4dC5Qcm92aWRlcj5cbiAgKVxufVxuXG5TZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwLk9wdGlvbiA9IE9wdGlvblxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const SelectableCardOptionGroup = ({
+  legend,
+  legendDescription,
+  className,
+  required,
+  columns = 3,
+  children,
+  helper,
+  error,
+  onChange,
+  value,
+  optionValue,
+  onChangeOption,
+  name,
+  disabled,
+  size = "large"
+}) => {
+  const contextValue = useMemo(() => ({
+    groupName: name,
+    groupValue: value,
+    onChange,
+    onChangeOption,
+    optionValue,
+    required,
+    disabled,
+    error: !!error,
+    size
+  }), [disabled, error, name, onChange, onChangeOption, optionValue, required, value, size]);
+  return /* @__PURE__ */ jsx(SelectableCardOptionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    /* @__PURE__ */ jsx(FieldSet, { className, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+      legend ? /* @__PURE__ */ jsx(Label, { as: "legend", required, labelDescription: legendDescription, children: legend }) : null,
+      /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
+    ] }) }),
+    error && typeof error === "string" || helper ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", prominence: "weak", sentiment: error ? "danger" : "neutral", children: helper || error }) : null
+  ] }) });
+};
+SelectableCardOptionGroup.Option = Option;
+export {
+  SelectableCardOptionGroup
+};

package/dist/components/SelectableCardOptionGroup/types.d.ts

@@ -0,0 +1 @@
+export type Sizes = 'large' | 'medium';