@wistia/ui 0.4.8-beta.f2d03166.7c06caa → 0.4.8
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 +1 -2
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.4.8
|
|
3
|
+
* @license @wistia/ui v0.4.8
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -75,9 +75,6 @@ __export(index_exports, {
|
|
|
75
75
|
RadioGroup: () => RadioGroup,
|
|
76
76
|
RadioMenuItem: () => RadioMenuItem,
|
|
77
77
|
ScreenReaderOnly: () => ScreenReaderOnly,
|
|
78
|
-
Select: () => Select,
|
|
79
|
-
SelectOption: () => SelectOption,
|
|
80
|
-
SelectOptionGroup: () => SelectOptionGroup,
|
|
81
78
|
Stack: () => Stack,
|
|
82
79
|
SubMenu: () => SubMenu,
|
|
83
80
|
Tag: () => Tag,
|
|
@@ -7824,8 +7821,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
|
|
|
7824
7821
|
`;
|
|
7825
7822
|
var SubMenuTrigger = (props) => {
|
|
7826
7823
|
const { isSmAndUp } = useMq();
|
|
7827
|
-
const
|
|
7828
|
-
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
7824
|
+
const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
|
|
7825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
7829
7826
|
MenuItemButton,
|
|
7830
7827
|
{
|
|
7831
7828
|
...props,
|
|
@@ -8787,190 +8784,6 @@ var WistiaLogo = ({
|
|
|
8787
8784
|
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
|
|
8788
8785
|
};
|
|
8789
8786
|
WistiaLogo.displayName = "WistiaLogo";
|
|
8790
|
-
|
|
8791
|
-
// src/components/Select/Select.tsx
|
|
8792
|
-
var import_react_select = require("@radix-ui/react-select");
|
|
8793
|
-
var import_react41 = require("react");
|
|
8794
|
-
var import_styled_components54 = __toESM(require("styled-components"));
|
|
8795
|
-
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8796
|
-
var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
|
|
8797
|
-
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8798
|
-
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
8799
|
-
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
8800
|
-
--wui-select-color-border: var(--wui-color-border);
|
|
8801
|
-
--wui-select-color-border-focus: var(--wui-color-border-active);
|
|
8802
|
-
--wui-select-color-border-error: var(--wui-color-border-error);
|
|
8803
|
-
--wui-select-color-border-disabled: var(--wui-color-border-disabled);
|
|
8804
|
-
--wui-select-border-radius: var(--wui-border-radius-rounded);
|
|
8805
|
-
--wui-select-multiline-border-radius: var(--wui-border-radius-02);
|
|
8806
|
-
--wui-select-vertical-padding: var(--wui-space-02);
|
|
8807
|
-
--wui-select-horizontal-padding: var(--wui-space-03);
|
|
8808
|
-
--wui-select-placeholder: var(--wui-gray-10);
|
|
8809
|
-
--wui-select-color-text-error: var(--wui-color-text-error);
|
|
8810
|
-
|
|
8811
|
-
padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
|
|
8812
|
-
background-color: var(--wui-select-color-bg);
|
|
8813
|
-
border: 1px solid var(--wui-select-color-border);
|
|
8814
|
-
border-radius: var(--wui-select-border-radius);
|
|
8815
|
-
min-width: 200px;
|
|
8816
|
-
text-align: left;
|
|
8817
|
-
display: inline-flex;
|
|
8818
|
-
align-items: center;
|
|
8819
|
-
justify-content: space-between;
|
|
8820
|
-
width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
|
|
8821
|
-
|
|
8822
|
-
&[aria-expanded='true'],
|
|
8823
|
-
&:focus {
|
|
8824
|
-
outline: 2px solid var(--wui-color-focus-ring);
|
|
8825
|
-
}
|
|
8826
|
-
|
|
8827
|
-
&[aria-invalid='true'] {
|
|
8828
|
-
outline: 2px solid var(--wui-select-color-border-error);
|
|
8829
|
-
color: var(--wui-select-color-text-error);
|
|
8830
|
-
}
|
|
8831
|
-
|
|
8832
|
-
&:disabled {
|
|
8833
|
-
border-color: var(--wui-color-bg-surface-disabled);
|
|
8834
|
-
background-color: var(--wui-color-bg-surface-disabled);
|
|
8835
|
-
}
|
|
8836
|
-
`;
|
|
8837
|
-
var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
|
|
8838
|
-
--wui-select-content-border: var(--wui-color-border);
|
|
8839
|
-
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
8840
|
-
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
8841
|
-
--wui-select-option-padding: var(--wui-space-02);
|
|
8842
|
-
--wui-select-option-inner-gap: var(--wui-space-03);
|
|
8843
|
-
--wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
|
|
8844
|
-
|
|
8845
|
-
overflow: hidden;
|
|
8846
|
-
transform: translateY(8px);
|
|
8847
|
-
background-color: var(--wui-select-content-bg);
|
|
8848
|
-
border: 1px solid var(--wui-select-content-border);
|
|
8849
|
-
border-radius: var(--wui-select-content-border-radius);
|
|
8850
|
-
padding: var(--wui-select-option-padding);
|
|
8851
|
-
min-width: 200px;
|
|
8852
|
-
`;
|
|
8853
|
-
var Select = (0, import_react41.forwardRef)(
|
|
8854
|
-
({
|
|
8855
|
-
colorScheme = "inherit",
|
|
8856
|
-
children,
|
|
8857
|
-
onChange = () => null,
|
|
8858
|
-
placeholder = "Select...",
|
|
8859
|
-
fullWidth = false,
|
|
8860
|
-
...props
|
|
8861
|
-
}, forwardedRef) => {
|
|
8862
|
-
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
8863
|
-
return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
8864
|
-
import_react_select.Root,
|
|
8865
|
-
{
|
|
8866
|
-
...props,
|
|
8867
|
-
onValueChange: onChange,
|
|
8868
|
-
children: [
|
|
8869
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
8870
|
-
StyledTrigger,
|
|
8871
|
-
{
|
|
8872
|
-
ref: forwardedRef,
|
|
8873
|
-
$colorScheme: colorScheme,
|
|
8874
|
-
$fullWidth: responsiveFullWidth,
|
|
8875
|
-
...props,
|
|
8876
|
-
children: [
|
|
8877
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
|
|
8878
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
|
|
8879
|
-
Icon,
|
|
8880
|
-
{
|
|
8881
|
-
size: "md",
|
|
8882
|
-
type: "caret-down"
|
|
8883
|
-
}
|
|
8884
|
-
)
|
|
8885
|
-
]
|
|
8886
|
-
}
|
|
8887
|
-
),
|
|
8888
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
|
|
8889
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
|
|
8890
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
|
|
8891
|
-
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
|
|
8892
|
-
] }) })
|
|
8893
|
-
]
|
|
8894
|
-
}
|
|
8895
|
-
);
|
|
8896
|
-
}
|
|
8897
|
-
);
|
|
8898
|
-
Select.displayName = "Select";
|
|
8899
|
-
|
|
8900
|
-
// src/components/Select/SelectOption.tsx
|
|
8901
|
-
var import_react_select2 = require("@radix-ui/react-select");
|
|
8902
|
-
var import_react42 = require("react");
|
|
8903
|
-
var import_styled_components55 = __toESM(require("styled-components"));
|
|
8904
|
-
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8905
|
-
var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
|
|
8906
|
-
${variantStyleMap2.body3};
|
|
8907
|
-
display: flex;
|
|
8908
|
-
padding: var(--wui-select-option-padding);
|
|
8909
|
-
gap: var(--wui-select-option-inner-gap);
|
|
8910
|
-
font-size: var(--font-size);
|
|
8911
|
-
font-weight: var(--font-weight);
|
|
8912
|
-
border-radius: var(--wui-border-radius-01);
|
|
8913
|
-
|
|
8914
|
-
&:hover,
|
|
8915
|
-
&:focus-visible {
|
|
8916
|
-
background-color: var(--wui-select-option-bg-hover);
|
|
8917
|
-
outline: none;
|
|
8918
|
-
}
|
|
8919
|
-
|
|
8920
|
-
&[aria-disabled='true'] {
|
|
8921
|
-
color: var(--wui-color-text-disabled);
|
|
8922
|
-
}
|
|
8923
|
-
|
|
8924
|
-
&[aria-disabled='true']:hover {
|
|
8925
|
-
background-color: transparent;
|
|
8926
|
-
}
|
|
8927
|
-
`;
|
|
8928
|
-
var StyledIconContainer = import_styled_components55.default.span`
|
|
8929
|
-
width: 12px;
|
|
8930
|
-
`;
|
|
8931
|
-
var SelectOption = (0, import_react42.forwardRef)(
|
|
8932
|
-
({ children, ...props }, forwardedRef) => {
|
|
8933
|
-
return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
|
|
8934
|
-
StyledItem,
|
|
8935
|
-
{
|
|
8936
|
-
...props,
|
|
8937
|
-
ref: forwardedRef,
|
|
8938
|
-
children: [
|
|
8939
|
-
/* @__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)(
|
|
8940
|
-
Icon,
|
|
8941
|
-
{
|
|
8942
|
-
size: "sm",
|
|
8943
|
-
type: "checkmark"
|
|
8944
|
-
}
|
|
8945
|
-
) }) }),
|
|
8946
|
-
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
|
|
8947
|
-
]
|
|
8948
|
-
}
|
|
8949
|
-
);
|
|
8950
|
-
}
|
|
8951
|
-
);
|
|
8952
|
-
SelectOption.displayName = "Option";
|
|
8953
|
-
|
|
8954
|
-
// src/components/Select/SelectOptionGroup.tsx
|
|
8955
|
-
var import_react_select3 = require("@radix-ui/react-select");
|
|
8956
|
-
var import_styled_components56 = __toESM(require("styled-components"));
|
|
8957
|
-
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8958
|
-
var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
|
|
8959
|
-
padding: var(--wui-select-option-padding);
|
|
8960
|
-
`;
|
|
8961
|
-
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
8962
|
-
return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
8963
|
-
/* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
8964
|
-
Text,
|
|
8965
|
-
{
|
|
8966
|
-
prominence: "secondary",
|
|
8967
|
-
variant: "body3",
|
|
8968
|
-
children: label
|
|
8969
|
-
}
|
|
8970
|
-
) }),
|
|
8971
|
-
children
|
|
8972
|
-
] });
|
|
8973
|
-
};
|
|
8974
8787
|
// Annotate the CommonJS export names for ESM import in node:
|
|
8975
8788
|
0 && (module.exports = {
|
|
8976
8789
|
ActionButton,
|
|
@@ -9009,9 +8822,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
9009
8822
|
RadioGroup,
|
|
9010
8823
|
RadioMenuItem,
|
|
9011
8824
|
ScreenReaderOnly,
|
|
9012
|
-
Select,
|
|
9013
|
-
SelectOption,
|
|
9014
|
-
SelectOptionGroup,
|
|
9015
8825
|
Stack,
|
|
9016
8826
|
SubMenu,
|
|
9017
8827
|
Tag,
|