@wistia/ui 0.4.5-beta.6e03699d.b924d76 → 0.4.5-beta.e27ea928.c4e583e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -193
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -72
- package/dist/index.d.ts +1 -72
- package/dist/index.mjs +3 -199
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.4.5-beta.
|
|
3
|
+
* @license @wistia/ui v0.4.5-beta.e27ea928.c4e583e
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -71,13 +71,10 @@ __export(index_exports, {
|
|
|
71
71
|
MenuLabel: () => MenuLabel,
|
|
72
72
|
MenuRadioGroup: () => MenuRadioGroup,
|
|
73
73
|
Modal: () => Modal,
|
|
74
|
-
Option: () => Option,
|
|
75
|
-
OptionGroup: () => OptionGroup,
|
|
76
74
|
Radio: () => Radio,
|
|
77
75
|
RadioGroup: () => RadioGroup,
|
|
78
76
|
RadioMenuItem: () => RadioMenuItem,
|
|
79
77
|
ScreenReaderOnly: () => ScreenReaderOnly,
|
|
80
|
-
Select: () => Select,
|
|
81
78
|
Stack: () => Stack,
|
|
82
79
|
SubMenu: () => SubMenu,
|
|
83
80
|
Tag: () => Tag,
|
|
@@ -7811,8 +7808,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
|
|
|
7811
7808
|
`;
|
|
7812
7809
|
var SubMenuTrigger = (props) => {
|
|
7813
7810
|
const { isSmAndUp } = useMq();
|
|
7814
|
-
const
|
|
7815
|
-
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
7811
|
+
const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
|
|
7812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
7816
7813
|
MenuItemButton,
|
|
7817
7814
|
{
|
|
7818
7815
|
...props,
|
|
@@ -8773,190 +8770,6 @@ var WistiaLogo = ({
|
|
|
8773
8770
|
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
|
|
8774
8771
|
};
|
|
8775
8772
|
WistiaLogo.displayName = "WistiaLogo";
|
|
8776
|
-
|
|
8777
|
-
// src/components/Select/Select.tsx
|
|
8778
|
-
var import_react_select = require("@radix-ui/react-select");
|
|
8779
|
-
var import_react39 = require("react");
|
|
8780
|
-
var import_styled_components54 = __toESM(require("styled-components"));
|
|
8781
|
-
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8782
|
-
var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
|
|
8783
|
-
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8784
|
-
|
|
8785
|
-
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
8786
|
-
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
8787
|
-
--wui-select-color-border: var(--wui-color-border);
|
|
8788
|
-
--wui-select-color-border-focus: var(--wui-color-border-active);
|
|
8789
|
-
--wui-select-color-border-error: var(--wui-color-border-error);
|
|
8790
|
-
--wui-select-color-border-disabled: var(--wui-color-border-disabled);
|
|
8791
|
-
--wui-select-border-radius: var(--wui-border-radius-rounded);
|
|
8792
|
-
--wui-select-multiline-border-radius: var(--wui-border-radius-02);
|
|
8793
|
-
--wui-select-vertical-padding: var(--wui-space-02);
|
|
8794
|
-
--wui-select-horizontal-padding: var(--wui-space-03);
|
|
8795
|
-
--wui-select-placeholder: var(--wui-gray-10);
|
|
8796
|
-
--wui-select-color-text-error: var(--wui-color-text-error);
|
|
8797
|
-
|
|
8798
|
-
padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
|
|
8799
|
-
background-color: var(--wui-select-color-bg);
|
|
8800
|
-
border: 1px solid var(--wui-select-color-border);
|
|
8801
|
-
border-radius: var(--wui-select-border-radius);
|
|
8802
|
-
min-width: 200px;
|
|
8803
|
-
text-align: left;
|
|
8804
|
-
display: inline-flex;
|
|
8805
|
-
align-items: center;
|
|
8806
|
-
justify-content: space-between;
|
|
8807
|
-
width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
|
|
8808
|
-
|
|
8809
|
-
&[aria-expanded='true'],
|
|
8810
|
-
&:focus {
|
|
8811
|
-
outline: 2px solid var(--wui-color-focus-ring);
|
|
8812
|
-
}
|
|
8813
|
-
|
|
8814
|
-
&[aria-invalid='true'] {
|
|
8815
|
-
outline: 2px solid var(--wui-select-color-border-error);
|
|
8816
|
-
color: var(--wui-select-color-text-error);
|
|
8817
|
-
}
|
|
8818
|
-
|
|
8819
|
-
&:disabled {
|
|
8820
|
-
border-color: var(--wui-color-bg-surface-disabled);
|
|
8821
|
-
background-color: var(--wui-color-bg-surface-disabled);
|
|
8822
|
-
}
|
|
8823
|
-
`;
|
|
8824
|
-
var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
|
|
8825
|
-
--wui-select-content-border: var(--wui-color-border);
|
|
8826
|
-
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
8827
|
-
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
8828
|
-
--wui-select-option-padding: var(--wui-space-02);
|
|
8829
|
-
--wui-select-option-inner-gap: var(--wui-space-03);
|
|
8830
|
-
--wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
|
|
8831
|
-
overflow: hidden;
|
|
8832
|
-
transform: translateY(8px);
|
|
8833
|
-
background-color: var(--wui-select-content-bg);
|
|
8834
|
-
border: 1px solid var(--wui-select-content-border);
|
|
8835
|
-
border-radius: var(--wui-select-content-border-radius);
|
|
8836
|
-
padding: var(--wui-select-option-padding);
|
|
8837
|
-
min-width: 200px;
|
|
8838
|
-
`;
|
|
8839
|
-
var Select = (0, import_react39.forwardRef)(
|
|
8840
|
-
({
|
|
8841
|
-
colorScheme = "inherit",
|
|
8842
|
-
children,
|
|
8843
|
-
onChange = () => null,
|
|
8844
|
-
placeholder = "Select...",
|
|
8845
|
-
fullWidth = false,
|
|
8846
|
-
...props
|
|
8847
|
-
}, forwardedRef) => {
|
|
8848
|
-
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
8849
|
-
return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
8850
|
-
import_react_select.Root,
|
|
8851
|
-
{
|
|
8852
|
-
...props,
|
|
8853
|
-
onValueChange: onChange,
|
|
8854
|
-
children: [
|
|
8855
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
8856
|
-
StyledTrigger,
|
|
8857
|
-
{
|
|
8858
|
-
ref: forwardedRef,
|
|
8859
|
-
$colorScheme: colorScheme,
|
|
8860
|
-
$fullWidth: responsiveFullWidth,
|
|
8861
|
-
...props,
|
|
8862
|
-
children: [
|
|
8863
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
|
|
8864
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
|
|
8865
|
-
Icon,
|
|
8866
|
-
{
|
|
8867
|
-
size: "md",
|
|
8868
|
-
type: "caret-down"
|
|
8869
|
-
}
|
|
8870
|
-
)
|
|
8871
|
-
]
|
|
8872
|
-
}
|
|
8873
|
-
),
|
|
8874
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
|
|
8875
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
|
|
8876
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
|
|
8877
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
|
|
8878
|
-
] }) })
|
|
8879
|
-
]
|
|
8880
|
-
}
|
|
8881
|
-
);
|
|
8882
|
-
}
|
|
8883
|
-
);
|
|
8884
|
-
Select.displayName = "Select";
|
|
8885
|
-
|
|
8886
|
-
// src/components/Select/Option.tsx
|
|
8887
|
-
var import_react_select2 = require("@radix-ui/react-select");
|
|
8888
|
-
var import_react40 = require("react");
|
|
8889
|
-
var import_styled_components55 = __toESM(require("styled-components"));
|
|
8890
|
-
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8891
|
-
var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
|
|
8892
|
-
${variantStyleMap2.body3};
|
|
8893
|
-
display: flex;
|
|
8894
|
-
padding: var(--wui-select-option-padding);
|
|
8895
|
-
gap: var(--wui-select-option-inner-gap);
|
|
8896
|
-
font-size: var(--font-size);
|
|
8897
|
-
font-weight: var(--font-weight);
|
|
8898
|
-
border-radius: var(--wui-border-radius-01);
|
|
8899
|
-
|
|
8900
|
-
&:hover,
|
|
8901
|
-
&:focus-visible {
|
|
8902
|
-
background-color: var(--wui-select-option-bg-hover);
|
|
8903
|
-
outline: none;
|
|
8904
|
-
}
|
|
8905
|
-
|
|
8906
|
-
&[aria-disabled='true'] {
|
|
8907
|
-
color: var(--wui-color-text-disabled);
|
|
8908
|
-
}
|
|
8909
|
-
|
|
8910
|
-
&[aria-disabled='true']:hover {
|
|
8911
|
-
background-color: transparent;
|
|
8912
|
-
}
|
|
8913
|
-
`;
|
|
8914
|
-
var StyledIconContainer = import_styled_components55.default.span`
|
|
8915
|
-
width: 12px;
|
|
8916
|
-
`;
|
|
8917
|
-
var Option = (0, import_react40.forwardRef)(
|
|
8918
|
-
({ children, ...props }, forwardedRef) => {
|
|
8919
|
-
return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
|
|
8920
|
-
StyledItem,
|
|
8921
|
-
{
|
|
8922
|
-
...props,
|
|
8923
|
-
ref: forwardedRef,
|
|
8924
|
-
children: [
|
|
8925
|
-
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
|
|
8926
|
-
Icon,
|
|
8927
|
-
{
|
|
8928
|
-
size: "sm",
|
|
8929
|
-
type: "checkmark"
|
|
8930
|
-
}
|
|
8931
|
-
) }) }),
|
|
8932
|
-
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
|
|
8933
|
-
]
|
|
8934
|
-
}
|
|
8935
|
-
);
|
|
8936
|
-
}
|
|
8937
|
-
);
|
|
8938
|
-
Option.displayName = "Option";
|
|
8939
|
-
|
|
8940
|
-
// src/components/Select/OptionGroup.tsx
|
|
8941
|
-
var import_react_select3 = require("@radix-ui/react-select");
|
|
8942
|
-
var import_styled_components56 = __toESM(require("styled-components"));
|
|
8943
|
-
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8944
|
-
var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
|
|
8945
|
-
padding: var(--wui-select-option-padding);
|
|
8946
|
-
`;
|
|
8947
|
-
var OptionGroup = ({ children, label, ...props }) => {
|
|
8948
|
-
return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
8949
|
-
/* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
8950
|
-
Text,
|
|
8951
|
-
{
|
|
8952
|
-
prominence: "secondary",
|
|
8953
|
-
variant: "body3",
|
|
8954
|
-
children: label
|
|
8955
|
-
}
|
|
8956
|
-
) }),
|
|
8957
|
-
children
|
|
8958
|
-
] });
|
|
8959
|
-
};
|
|
8960
8773
|
// Annotate the CommonJS export names for ESM import in node:
|
|
8961
8774
|
0 && (module.exports = {
|
|
8962
8775
|
ActionButton,
|
|
@@ -8991,13 +8804,10 @@ var OptionGroup = ({ children, label, ...props }) => {
|
|
|
8991
8804
|
MenuLabel,
|
|
8992
8805
|
MenuRadioGroup,
|
|
8993
8806
|
Modal,
|
|
8994
|
-
Option,
|
|
8995
|
-
OptionGroup,
|
|
8996
8807
|
Radio,
|
|
8997
8808
|
RadioGroup,
|
|
8998
8809
|
RadioMenuItem,
|
|
8999
8810
|
ScreenReaderOnly,
|
|
9000
|
-
Select,
|
|
9001
8811
|
Stack,
|
|
9002
8812
|
SubMenu,
|
|
9003
8813
|
Tag,
|