@uniformdev/design-system 19.164.0 → 19.165.0
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/esm/index.js +34 -26
- package/dist/index.d.mts +9 -5
- package/dist/index.d.ts +9 -5
- package/dist/index.js +64 -56
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -21724,7 +21724,7 @@ var Skeleton = ({
|
|
|
21724
21724
|
);
|
|
21725
21725
|
|
|
21726
21726
|
// src/components/Switch/Switch.tsx
|
|
21727
|
-
import
|
|
21727
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
21728
21728
|
|
|
21729
21729
|
// src/components/Switch/Switch.styles.ts
|
|
21730
21730
|
import { css as css100 } from "@emotion/react";
|
|
@@ -21737,7 +21737,7 @@ var SwitchInputContainer = css100`
|
|
|
21737
21737
|
vertical-align: middle;
|
|
21738
21738
|
user-select: none;
|
|
21739
21739
|
`;
|
|
21740
|
-
var SwitchInput = css100`
|
|
21740
|
+
var SwitchInput = (size) => css100`
|
|
21741
21741
|
appearance: none;
|
|
21742
21742
|
border-radius: var(--rounded-full);
|
|
21743
21743
|
background-color: var(--white);
|
|
@@ -21745,15 +21745,16 @@ var SwitchInput = css100`
|
|
|
21745
21745
|
cursor: pointer;
|
|
21746
21746
|
position: absolute;
|
|
21747
21747
|
display: block;
|
|
21748
|
-
width: var(--spacing-md);
|
|
21749
|
-
height: var(--spacing-md);
|
|
21748
|
+
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21749
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21750
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
21750
21751
|
transition: transform var(--duration-fast) var(--timing-ease-out),
|
|
21751
21752
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
21752
21753
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
21753
21754
|
z-index: var(--z-10);
|
|
21754
21755
|
|
|
21755
21756
|
&:focus {
|
|
21756
|
-
outline:
|
|
21757
|
+
outline: 2px solid var(--gray-800);
|
|
21757
21758
|
outline-offset: 2px;
|
|
21758
21759
|
}
|
|
21759
21760
|
|
|
@@ -21783,12 +21784,12 @@ var SwitchInputDisabled = css100`
|
|
|
21783
21784
|
cursor: not-allowed;
|
|
21784
21785
|
}
|
|
21785
21786
|
`;
|
|
21786
|
-
var SwitchInputLabel = css100`
|
|
21787
|
+
var SwitchInputLabel = (size) => css100`
|
|
21787
21788
|
align-items: center;
|
|
21788
21789
|
color: var(--typography-base);
|
|
21789
21790
|
display: inline-flex;
|
|
21790
21791
|
line-height: 1.25;
|
|
21791
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
21792
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
21792
21793
|
|
|
21793
21794
|
&:before {
|
|
21794
21795
|
border-radius: var(--rounded-full);
|
|
@@ -21797,40 +21798,47 @@ var SwitchInputLabel = css100`
|
|
|
21797
21798
|
cursor: pointer;
|
|
21798
21799
|
display: block;
|
|
21799
21800
|
overflow: hidden;
|
|
21800
|
-
width: var(--spacing-xl);
|
|
21801
|
-
height: var(--spacing-md);
|
|
21801
|
+
width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
|
|
21802
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21803
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
21802
21804
|
position: absolute;
|
|
21803
21805
|
left: 0;
|
|
21804
21806
|
top: 0;
|
|
21805
21807
|
}
|
|
21806
21808
|
`;
|
|
21807
|
-
var SwitchText = css100`
|
|
21809
|
+
var SwitchText = (size) => css100`
|
|
21808
21810
|
color: var(--gray-500);
|
|
21809
21811
|
font-size: var(--fs-sm);
|
|
21810
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
21812
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
21811
21813
|
`;
|
|
21812
21814
|
|
|
21813
21815
|
// src/components/Switch/Switch.tsx
|
|
21814
21816
|
import { Fragment as Fragment21, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21815
|
-
var Switch =
|
|
21816
|
-
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
21817
|
+
var Switch = forwardRef24(
|
|
21818
|
+
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
21817
21819
|
let additionalText = infoText;
|
|
21818
21820
|
if (infoText && toggleText) {
|
|
21819
21821
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
21820
21822
|
}
|
|
21821
21823
|
return /* @__PURE__ */ jsxs87(Fragment21, { children: [
|
|
21822
|
-
/* @__PURE__ */ jsxs87(
|
|
21823
|
-
|
|
21824
|
-
|
|
21825
|
-
|
|
21826
|
-
|
|
21824
|
+
/* @__PURE__ */ jsxs87(
|
|
21825
|
+
"label",
|
|
21826
|
+
{
|
|
21827
|
+
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
21828
|
+
children: [
|
|
21829
|
+
/* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
21830
|
+
/* @__PURE__ */ jsx131("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
21831
|
+
]
|
|
21832
|
+
}
|
|
21833
|
+
),
|
|
21834
|
+
additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
21827
21835
|
children
|
|
21828
21836
|
] });
|
|
21829
21837
|
}
|
|
21830
21838
|
);
|
|
21831
21839
|
|
|
21832
21840
|
// src/components/Table/Table.tsx
|
|
21833
|
-
import * as
|
|
21841
|
+
import * as React24 from "react";
|
|
21834
21842
|
|
|
21835
21843
|
// src/components/Table/Table.styles.ts
|
|
21836
21844
|
import { css as css101 } from "@emotion/react";
|
|
@@ -21869,37 +21877,37 @@ var tableCellHead = css101`
|
|
|
21869
21877
|
|
|
21870
21878
|
// src/components/Table/Table.tsx
|
|
21871
21879
|
import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
|
|
21872
|
-
var Table =
|
|
21880
|
+
var Table = React24.forwardRef(
|
|
21873
21881
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
21874
21882
|
return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
21875
21883
|
}
|
|
21876
21884
|
);
|
|
21877
|
-
var TableHead =
|
|
21885
|
+
var TableHead = React24.forwardRef(
|
|
21878
21886
|
({ children, ...otherProps }, ref) => {
|
|
21879
21887
|
return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
|
|
21880
21888
|
}
|
|
21881
21889
|
);
|
|
21882
|
-
var TableBody =
|
|
21890
|
+
var TableBody = React24.forwardRef(
|
|
21883
21891
|
({ children, ...otherProps }, ref) => {
|
|
21884
21892
|
return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
|
|
21885
21893
|
}
|
|
21886
21894
|
);
|
|
21887
|
-
var TableFoot =
|
|
21895
|
+
var TableFoot = React24.forwardRef(
|
|
21888
21896
|
({ children, ...otherProps }, ref) => {
|
|
21889
21897
|
return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
|
|
21890
21898
|
}
|
|
21891
21899
|
);
|
|
21892
|
-
var TableRow =
|
|
21900
|
+
var TableRow = React24.forwardRef(
|
|
21893
21901
|
({ children, ...otherProps }, ref) => {
|
|
21894
21902
|
return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
|
|
21895
21903
|
}
|
|
21896
21904
|
);
|
|
21897
|
-
var TableCellHead =
|
|
21905
|
+
var TableCellHead = React24.forwardRef(
|
|
21898
21906
|
({ children, ...otherProps }, ref) => {
|
|
21899
21907
|
return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
21900
21908
|
}
|
|
21901
21909
|
);
|
|
21902
|
-
var TableCellData =
|
|
21910
|
+
var TableCellData = React24.forwardRef(
|
|
21903
21911
|
({ children, ...otherProps }, ref) => {
|
|
21904
21912
|
return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
|
|
21905
21913
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -23420,15 +23420,17 @@ type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttribu
|
|
|
23420
23420
|
*/
|
|
23421
23421
|
declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
23422
23422
|
|
|
23423
|
-
type SwitchProps = Omit<React
|
|
23423
|
+
type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
23424
23424
|
/** sets the label value */
|
|
23425
|
-
label:
|
|
23425
|
+
label: ReactNode;
|
|
23426
23426
|
/** (optional) sets information text */
|
|
23427
23427
|
infoText?: string;
|
|
23428
23428
|
/** sets the toggle text value */
|
|
23429
23429
|
toggleText?: string;
|
|
23430
23430
|
/** sets child elements */
|
|
23431
|
-
children?:
|
|
23431
|
+
children?: ReactNode;
|
|
23432
|
+
/** the size of the control */
|
|
23433
|
+
switchSize?: 'base' | 'sm';
|
|
23432
23434
|
};
|
|
23433
23435
|
/**
|
|
23434
23436
|
* Uniform Switch Input Component
|
|
@@ -23437,13 +23439,15 @@ type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> &
|
|
|
23437
23439
|
*/
|
|
23438
23440
|
declare const Switch: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
23439
23441
|
/** sets the label value */
|
|
23440
|
-
label:
|
|
23442
|
+
label: ReactNode;
|
|
23441
23443
|
/** (optional) sets information text */
|
|
23442
23444
|
infoText?: string | undefined;
|
|
23443
23445
|
/** sets the toggle text value */
|
|
23444
23446
|
toggleText?: string | undefined;
|
|
23445
23447
|
/** sets child elements */
|
|
23446
|
-
children?:
|
|
23448
|
+
children?: ReactNode;
|
|
23449
|
+
/** the size of the control */
|
|
23450
|
+
switchSize?: "base" | "sm" | undefined;
|
|
23447
23451
|
} & React$1.RefAttributes<HTMLInputElement>>;
|
|
23448
23452
|
|
|
23449
23453
|
type TableProps = {
|
package/dist/index.d.ts
CHANGED
|
@@ -23420,15 +23420,17 @@ type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttribu
|
|
|
23420
23420
|
*/
|
|
23421
23421
|
declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
23422
23422
|
|
|
23423
|
-
type SwitchProps = Omit<React
|
|
23423
|
+
type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
23424
23424
|
/** sets the label value */
|
|
23425
|
-
label:
|
|
23425
|
+
label: ReactNode;
|
|
23426
23426
|
/** (optional) sets information text */
|
|
23427
23427
|
infoText?: string;
|
|
23428
23428
|
/** sets the toggle text value */
|
|
23429
23429
|
toggleText?: string;
|
|
23430
23430
|
/** sets child elements */
|
|
23431
|
-
children?:
|
|
23431
|
+
children?: ReactNode;
|
|
23432
|
+
/** the size of the control */
|
|
23433
|
+
switchSize?: 'base' | 'sm';
|
|
23432
23434
|
};
|
|
23433
23435
|
/**
|
|
23434
23436
|
* Uniform Switch Input Component
|
|
@@ -23437,13 +23439,15 @@ type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> &
|
|
|
23437
23439
|
*/
|
|
23438
23440
|
declare const Switch: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
23439
23441
|
/** sets the label value */
|
|
23440
|
-
label:
|
|
23442
|
+
label: ReactNode;
|
|
23441
23443
|
/** (optional) sets information text */
|
|
23442
23444
|
infoText?: string | undefined;
|
|
23443
23445
|
/** sets the toggle text value */
|
|
23444
23446
|
toggleText?: string | undefined;
|
|
23445
23447
|
/** sets child elements */
|
|
23446
|
-
children?:
|
|
23448
|
+
children?: ReactNode;
|
|
23449
|
+
/** the size of the control */
|
|
23450
|
+
switchSize?: "base" | "sm" | undefined;
|
|
23447
23451
|
} & React$1.RefAttributes<HTMLInputElement>>;
|
|
23448
23452
|
|
|
23449
23453
|
type TableProps = {
|
package/dist/index.js
CHANGED
|
@@ -23595,7 +23595,7 @@ var Skeleton = ({
|
|
|
23595
23595
|
|
|
23596
23596
|
// src/components/Switch/Switch.tsx
|
|
23597
23597
|
init_emotion_jsx_shim();
|
|
23598
|
-
var
|
|
23598
|
+
var import_react155 = require("react");
|
|
23599
23599
|
|
|
23600
23600
|
// src/components/Switch/Switch.styles.ts
|
|
23601
23601
|
init_emotion_jsx_shim();
|
|
@@ -23609,7 +23609,7 @@ var SwitchInputContainer = import_react154.css`
|
|
|
23609
23609
|
vertical-align: middle;
|
|
23610
23610
|
user-select: none;
|
|
23611
23611
|
`;
|
|
23612
|
-
var SwitchInput = import_react154.css`
|
|
23612
|
+
var SwitchInput = (size) => import_react154.css`
|
|
23613
23613
|
appearance: none;
|
|
23614
23614
|
border-radius: var(--rounded-full);
|
|
23615
23615
|
background-color: var(--white);
|
|
@@ -23617,15 +23617,16 @@ var SwitchInput = import_react154.css`
|
|
|
23617
23617
|
cursor: pointer;
|
|
23618
23618
|
position: absolute;
|
|
23619
23619
|
display: block;
|
|
23620
|
-
width: var(--spacing-md);
|
|
23621
|
-
height: var(--spacing-md);
|
|
23620
|
+
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23621
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23622
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
23622
23623
|
transition: transform var(--duration-fast) var(--timing-ease-out),
|
|
23623
23624
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
23624
23625
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
23625
23626
|
z-index: var(--z-10);
|
|
23626
23627
|
|
|
23627
23628
|
&:focus {
|
|
23628
|
-
outline:
|
|
23629
|
+
outline: 2px solid var(--gray-800);
|
|
23629
23630
|
outline-offset: 2px;
|
|
23630
23631
|
}
|
|
23631
23632
|
|
|
@@ -23655,12 +23656,12 @@ var SwitchInputDisabled = import_react154.css`
|
|
|
23655
23656
|
cursor: not-allowed;
|
|
23656
23657
|
}
|
|
23657
23658
|
`;
|
|
23658
|
-
var SwitchInputLabel = import_react154.css`
|
|
23659
|
+
var SwitchInputLabel = (size) => import_react154.css`
|
|
23659
23660
|
align-items: center;
|
|
23660
23661
|
color: var(--typography-base);
|
|
23661
23662
|
display: inline-flex;
|
|
23662
23663
|
line-height: 1.25;
|
|
23663
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
23664
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
23664
23665
|
|
|
23665
23666
|
&:before {
|
|
23666
23667
|
border-radius: var(--rounded-full);
|
|
@@ -23669,33 +23670,40 @@ var SwitchInputLabel = import_react154.css`
|
|
|
23669
23670
|
cursor: pointer;
|
|
23670
23671
|
display: block;
|
|
23671
23672
|
overflow: hidden;
|
|
23672
|
-
width: var(--spacing-xl);
|
|
23673
|
-
height: var(--spacing-md);
|
|
23673
|
+
width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
|
|
23674
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23675
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
23674
23676
|
position: absolute;
|
|
23675
23677
|
left: 0;
|
|
23676
23678
|
top: 0;
|
|
23677
23679
|
}
|
|
23678
23680
|
`;
|
|
23679
|
-
var SwitchText = import_react154.css`
|
|
23681
|
+
var SwitchText = (size) => import_react154.css`
|
|
23680
23682
|
color: var(--gray-500);
|
|
23681
23683
|
font-size: var(--fs-sm);
|
|
23682
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
23684
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
23683
23685
|
`;
|
|
23684
23686
|
|
|
23685
23687
|
// src/components/Switch/Switch.tsx
|
|
23686
23688
|
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23687
|
-
var Switch =
|
|
23688
|
-
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
23689
|
+
var Switch = (0, import_react155.forwardRef)(
|
|
23690
|
+
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
23689
23691
|
let additionalText = infoText;
|
|
23690
23692
|
if (infoText && toggleText) {
|
|
23691
23693
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
23692
23694
|
}
|
|
23693
23695
|
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23694
|
-
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23695
|
-
|
|
23696
|
-
|
|
23697
|
-
|
|
23698
|
-
|
|
23696
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23697
|
+
"label",
|
|
23698
|
+
{
|
|
23699
|
+
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
23700
|
+
children: [
|
|
23701
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
23702
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
23703
|
+
]
|
|
23704
|
+
}
|
|
23705
|
+
),
|
|
23706
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
23699
23707
|
children
|
|
23700
23708
|
] });
|
|
23701
23709
|
}
|
|
@@ -23703,12 +23711,12 @@ var Switch = React24.forwardRef(
|
|
|
23703
23711
|
|
|
23704
23712
|
// src/components/Table/Table.tsx
|
|
23705
23713
|
init_emotion_jsx_shim();
|
|
23706
|
-
var
|
|
23714
|
+
var React24 = __toESM(require("react"));
|
|
23707
23715
|
|
|
23708
23716
|
// src/components/Table/Table.styles.ts
|
|
23709
23717
|
init_emotion_jsx_shim();
|
|
23710
|
-
var
|
|
23711
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
23718
|
+
var import_react156 = require("@emotion/react");
|
|
23719
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react156.css`
|
|
23712
23720
|
border-bottom: 1px solid var(--gray-400);
|
|
23713
23721
|
border-collapse: collapse;
|
|
23714
23722
|
min-width: 100%;
|
|
@@ -23728,14 +23736,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
|
|
|
23728
23736
|
background-color: var(--gray-50);
|
|
23729
23737
|
}
|
|
23730
23738
|
`;
|
|
23731
|
-
var tableHead =
|
|
23739
|
+
var tableHead = import_react156.css`
|
|
23732
23740
|
color: var(--typography-base);
|
|
23733
23741
|
text-align: left;
|
|
23734
23742
|
`;
|
|
23735
|
-
var tableRow =
|
|
23743
|
+
var tableRow = import_react156.css`
|
|
23736
23744
|
border-bottom: 1px solid var(--gray-100);
|
|
23737
23745
|
`;
|
|
23738
|
-
var tableCellHead =
|
|
23746
|
+
var tableCellHead = import_react156.css`
|
|
23739
23747
|
font-size: var(--fs-sm);
|
|
23740
23748
|
text-transform: uppercase;
|
|
23741
23749
|
font-weight: var(--fw-bold);
|
|
@@ -23743,37 +23751,37 @@ var tableCellHead = import_react155.css`
|
|
|
23743
23751
|
|
|
23744
23752
|
// src/components/Table/Table.tsx
|
|
23745
23753
|
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23746
|
-
var Table =
|
|
23754
|
+
var Table = React24.forwardRef(
|
|
23747
23755
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
23748
23756
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
23749
23757
|
}
|
|
23750
23758
|
);
|
|
23751
|
-
var TableHead =
|
|
23759
|
+
var TableHead = React24.forwardRef(
|
|
23752
23760
|
({ children, ...otherProps }, ref) => {
|
|
23753
23761
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
23754
23762
|
}
|
|
23755
23763
|
);
|
|
23756
|
-
var TableBody =
|
|
23764
|
+
var TableBody = React24.forwardRef(
|
|
23757
23765
|
({ children, ...otherProps }, ref) => {
|
|
23758
23766
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
|
|
23759
23767
|
}
|
|
23760
23768
|
);
|
|
23761
|
-
var TableFoot =
|
|
23769
|
+
var TableFoot = React24.forwardRef(
|
|
23762
23770
|
({ children, ...otherProps }, ref) => {
|
|
23763
23771
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
|
|
23764
23772
|
}
|
|
23765
23773
|
);
|
|
23766
|
-
var TableRow =
|
|
23774
|
+
var TableRow = React24.forwardRef(
|
|
23767
23775
|
({ children, ...otherProps }, ref) => {
|
|
23768
23776
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
23769
23777
|
}
|
|
23770
23778
|
);
|
|
23771
|
-
var TableCellHead =
|
|
23779
|
+
var TableCellHead = React24.forwardRef(
|
|
23772
23780
|
({ children, ...otherProps }, ref) => {
|
|
23773
23781
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
23774
23782
|
}
|
|
23775
23783
|
);
|
|
23776
|
-
var TableCellData =
|
|
23784
|
+
var TableCellData = React24.forwardRef(
|
|
23777
23785
|
({ children, ...otherProps }, ref) => {
|
|
23778
23786
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
|
|
23779
23787
|
}
|
|
@@ -23781,13 +23789,13 @@ var TableCellData = React25.forwardRef(
|
|
|
23781
23789
|
|
|
23782
23790
|
// src/components/Tabs/Tabs.tsx
|
|
23783
23791
|
init_emotion_jsx_shim();
|
|
23784
|
-
var
|
|
23785
|
-
var
|
|
23792
|
+
var import_react158 = require("@ariakit/react");
|
|
23793
|
+
var import_react159 = require("react");
|
|
23786
23794
|
|
|
23787
23795
|
// src/components/Tabs/Tabs.styles.ts
|
|
23788
23796
|
init_emotion_jsx_shim();
|
|
23789
|
-
var
|
|
23790
|
-
var tabButtonStyles =
|
|
23797
|
+
var import_react157 = require("@emotion/react");
|
|
23798
|
+
var tabButtonStyles = import_react157.css`
|
|
23791
23799
|
align-items: center;
|
|
23792
23800
|
border: 0;
|
|
23793
23801
|
height: 2.5rem;
|
|
@@ -23804,7 +23812,7 @@ var tabButtonStyles = import_react156.css`
|
|
|
23804
23812
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
23805
23813
|
}
|
|
23806
23814
|
`;
|
|
23807
|
-
var tabButtonGroupStyles =
|
|
23815
|
+
var tabButtonGroupStyles = import_react157.css`
|
|
23808
23816
|
display: flex;
|
|
23809
23817
|
gap: var(--spacing-base);
|
|
23810
23818
|
border-bottom: 1px solid var(--gray-300);
|
|
@@ -23813,7 +23821,7 @@ var tabButtonGroupStyles = import_react156.css`
|
|
|
23813
23821
|
// src/components/Tabs/Tabs.tsx
|
|
23814
23822
|
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23815
23823
|
var useCurrentTab = () => {
|
|
23816
|
-
const context = (0,
|
|
23824
|
+
const context = (0, import_react158.useTabStore)();
|
|
23817
23825
|
if (!context) {
|
|
23818
23826
|
throw new Error("This component can only be used inside <Tabs>");
|
|
23819
23827
|
}
|
|
@@ -23827,13 +23835,13 @@ var Tabs = ({
|
|
|
23827
23835
|
manual,
|
|
23828
23836
|
...props
|
|
23829
23837
|
}) => {
|
|
23830
|
-
const selected = (0,
|
|
23838
|
+
const selected = (0, import_react159.useMemo)(() => {
|
|
23831
23839
|
if (selectedId)
|
|
23832
23840
|
return selectedId;
|
|
23833
23841
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
23834
23842
|
}, [selectedId, useHashForState]);
|
|
23835
|
-
const tab = (0,
|
|
23836
|
-
const onTabSelect = (0,
|
|
23843
|
+
const tab = (0, import_react158.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
23844
|
+
const onTabSelect = (0, import_react159.useCallback)(
|
|
23837
23845
|
(value) => {
|
|
23838
23846
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
23839
23847
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -23844,28 +23852,28 @@ var Tabs = ({
|
|
|
23844
23852
|
},
|
|
23845
23853
|
[onSelectedIdChange, useHashForState]
|
|
23846
23854
|
);
|
|
23847
|
-
(0,
|
|
23855
|
+
(0, import_react159.useEffect)(() => {
|
|
23848
23856
|
if (selected && selected !== tab.getState().activeId) {
|
|
23849
23857
|
tab.setSelectedId(selected);
|
|
23850
23858
|
}
|
|
23851
23859
|
}, [selected, tab]);
|
|
23852
|
-
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
23853
23861
|
};
|
|
23854
23862
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
23855
|
-
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
23856
23864
|
};
|
|
23857
23865
|
var TabButton = ({
|
|
23858
23866
|
children,
|
|
23859
23867
|
id,
|
|
23860
23868
|
...props
|
|
23861
23869
|
}) => {
|
|
23862
|
-
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23870
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
23863
23871
|
};
|
|
23864
23872
|
var TabContent = ({
|
|
23865
23873
|
children,
|
|
23866
23874
|
...props
|
|
23867
23875
|
}) => {
|
|
23868
|
-
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
23876
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabPanel, { ...props, children });
|
|
23869
23877
|
};
|
|
23870
23878
|
|
|
23871
23879
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -23873,8 +23881,8 @@ init_emotion_jsx_shim();
|
|
|
23873
23881
|
|
|
23874
23882
|
// src/components/Validation/StatusBullet.styles.ts
|
|
23875
23883
|
init_emotion_jsx_shim();
|
|
23876
|
-
var
|
|
23877
|
-
var StatusBulletContainer =
|
|
23884
|
+
var import_react160 = require("@emotion/react");
|
|
23885
|
+
var StatusBulletContainer = import_react160.css`
|
|
23878
23886
|
align-items: center;
|
|
23879
23887
|
align-self: center;
|
|
23880
23888
|
color: var(--gray-500);
|
|
@@ -23891,33 +23899,33 @@ var StatusBulletContainer = import_react159.css`
|
|
|
23891
23899
|
display: block;
|
|
23892
23900
|
}
|
|
23893
23901
|
`;
|
|
23894
|
-
var StatusBulletBase =
|
|
23902
|
+
var StatusBulletBase = import_react160.css`
|
|
23895
23903
|
font-size: var(--fs-sm);
|
|
23896
23904
|
&:before {
|
|
23897
23905
|
width: var(--fs-xs);
|
|
23898
23906
|
height: var(--fs-xs);
|
|
23899
23907
|
}
|
|
23900
23908
|
`;
|
|
23901
|
-
var StatusBulletSmall =
|
|
23909
|
+
var StatusBulletSmall = import_react160.css`
|
|
23902
23910
|
font-size: var(--fs-xs);
|
|
23903
23911
|
&:before {
|
|
23904
23912
|
width: var(--fs-xxs);
|
|
23905
23913
|
height: var(--fs-xxs);
|
|
23906
23914
|
}
|
|
23907
23915
|
`;
|
|
23908
|
-
var StatusDraft =
|
|
23916
|
+
var StatusDraft = import_react160.css`
|
|
23909
23917
|
&:before {
|
|
23910
23918
|
background: var(--white);
|
|
23911
23919
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23912
23920
|
}
|
|
23913
23921
|
`;
|
|
23914
|
-
var StatusModified =
|
|
23922
|
+
var StatusModified = import_react160.css`
|
|
23915
23923
|
&:before {
|
|
23916
23924
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
23917
23925
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23918
23926
|
}
|
|
23919
23927
|
`;
|
|
23920
|
-
var StatusError =
|
|
23928
|
+
var StatusError = import_react160.css`
|
|
23921
23929
|
color: var(--error);
|
|
23922
23930
|
&:before {
|
|
23923
23931
|
/* TODO: replace this with an svg icon */
|
|
@@ -23930,22 +23938,22 @@ var StatusError = import_react159.css`
|
|
|
23930
23938
|
);
|
|
23931
23939
|
}
|
|
23932
23940
|
`;
|
|
23933
|
-
var StatusPublished =
|
|
23941
|
+
var StatusPublished = import_react160.css`
|
|
23934
23942
|
&:before {
|
|
23935
23943
|
background: var(--accent-dark);
|
|
23936
23944
|
}
|
|
23937
23945
|
`;
|
|
23938
|
-
var StatusOrphan =
|
|
23946
|
+
var StatusOrphan = import_react160.css`
|
|
23939
23947
|
&:before {
|
|
23940
23948
|
background: var(--brand-secondary-5);
|
|
23941
23949
|
}
|
|
23942
23950
|
`;
|
|
23943
|
-
var StatusUnknown =
|
|
23951
|
+
var StatusUnknown = import_react160.css`
|
|
23944
23952
|
&:before {
|
|
23945
23953
|
background: var(--gray-800);
|
|
23946
23954
|
}
|
|
23947
23955
|
`;
|
|
23948
|
-
var StatusDeleted =
|
|
23956
|
+
var StatusDeleted = import_react160.css`
|
|
23949
23957
|
&:before {
|
|
23950
23958
|
background: var(--error);
|
|
23951
23959
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/design-system",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.165.0",
|
|
4
4
|
"description": "Uniform design system components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"@storybook/react": "8.0.10",
|
|
25
25
|
"@types/react": "18.2.40",
|
|
26
26
|
"@types/react-dom": "18.2.17",
|
|
27
|
-
"@uniformdev/canvas": "^19.
|
|
28
|
-
"@uniformdev/richtext": "^19.
|
|
27
|
+
"@uniformdev/canvas": "^19.165.0",
|
|
28
|
+
"@uniformdev/richtext": "^19.165.0",
|
|
29
29
|
"autoprefixer": "10.4.16",
|
|
30
30
|
"hygen": "6.2.11",
|
|
31
31
|
"postcss": "8.4.38",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "edbe5a9fe21137f383003c6f604934dc9501b6e6"
|
|
76
76
|
}
|