@pantheon-systems/pds-toolkit-react 2.0.0-alpha.54 → 2.0.0-alpha.55
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/components/charts/shared/ChartLegend.d.ts +7 -1
- package/dist/components/charts/shared/chart-styles.d.ts +1 -1
- package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
- package/dist/components/inputs/TextInput/TextInput.d.ts +2 -2
- package/dist/components/inputs/TimeInput/TimeInput.d.ts +94 -0
- package/dist/css/component-css/pds-button.css +4 -4
- package/dist/css/component-css/pds-chart-legend.css +1 -1
- package/dist/css/component-css/pds-code-block.css +1 -1
- package/dist/css/component-css/pds-index.css +8 -8
- package/dist/css/component-css/pds-input-utilities.css +1 -1
- package/dist/css/component-css/pds-pie-chart.css +1 -1
- package/dist/css/component-css/pds-side-nav-global.css +1 -1
- package/dist/css/component-css/pds-time-input.css +1 -0
- package/dist/css/design-tokens/variables.dark.css +7 -6
- package/dist/css/design-tokens/variables.global.css +2 -2
- package/dist/css/design-tokens/variables.light.css +42 -41
- package/dist/css/layout-css/pds-app-layout.css +1 -1
- package/dist/css/layout-css/pds-index.css +1 -1
- package/dist/css/pds-components.css +8 -8
- package/dist/css/pds-core.css +1 -1
- package/dist/css/pds-layouts.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +971 -856
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +1 -0
- package/package.json +5 -2
|
@@ -2,6 +2,12 @@ import type { ChartDataPoint, SeriesConfig } from './types';
|
|
|
2
2
|
import './chart-legend.css';
|
|
3
3
|
export type LegendVariant = 'inline' | 'table';
|
|
4
4
|
interface ChartLegendProps {
|
|
5
|
+
/**
|
|
6
|
+
* Hides the legend table from assistive technology. Set this when an
|
|
7
|
+
* accessible data table already discloses the same data, making the
|
|
8
|
+
* visible legend table purely a sighted-user convenience.
|
|
9
|
+
*/
|
|
10
|
+
ariaHidden?: boolean;
|
|
5
11
|
/** Chart data — used to calculate totals for table variant */
|
|
6
12
|
data?: ChartDataPoint[];
|
|
7
13
|
/** Series definitions */
|
|
@@ -21,5 +27,5 @@ interface ChartLegendProps {
|
|
|
21
27
|
* Renders a chart legend in either inline (horizontal list) or
|
|
22
28
|
* table (rows with totals) format.
|
|
23
29
|
*/
|
|
24
|
-
export declare const ChartLegend: ({ data, series, seriesColors, tableHeader, valueFormatter, variant, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const ChartLegend: ({ ariaHidden, data, series, seriesColors, tableHeader, valueFormatter, variant, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
31
|
export {};
|
|
@@ -21,4 +21,4 @@ export declare const gridStroke = "var(--pds-color-border-default)";
|
|
|
21
21
|
* rather than a border — see the dataviz "surface gap" spec.
|
|
22
22
|
*/
|
|
23
23
|
export declare const stackedSegmentGapStroke = "var(--pds-color-surface-default)";
|
|
24
|
-
export declare const stackedSegmentGapWidth =
|
|
24
|
+
export declare const stackedSegmentGapWidth = 1;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Generated by: npm run generate:icon-data
|
|
5
5
|
* Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
|
|
6
|
-
* Generated: 2026-07-
|
|
6
|
+
* Generated: 2026-07-30T19:27:34.322Z
|
|
7
7
|
*/
|
|
8
8
|
import { customIcons } from './custom-icons';
|
|
9
9
|
export { customIcons };
|
|
@@ -9,7 +9,7 @@ type LabelStrings = {
|
|
|
9
9
|
visibilityToggleHide: string;
|
|
10
10
|
visibilityToggleShow: string;
|
|
11
11
|
};
|
|
12
|
-
type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
|
|
12
|
+
type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'time' | 'url' | 'search';
|
|
13
13
|
/**
|
|
14
14
|
* Prop types for TextInput
|
|
15
15
|
*/
|
|
@@ -120,7 +120,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
120
120
|
*/
|
|
121
121
|
translationStrings?: LabelStrings;
|
|
122
122
|
/**
|
|
123
|
-
* Type of input field to use.
|
|
123
|
+
* Type of input field to use. For `time`, prefer the TimeInput component when possible — it offers segmented entry, 12/24-hour display, and timezone support. Use TextInput's native `time` type only as a lightweight fallback where that complexity isn't warranted; note it renders with browser-native time picker UI that isn't fully styleable to match PDS.
|
|
124
124
|
*/
|
|
125
125
|
type?: HtmlInputTypes;
|
|
126
126
|
/**
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { CalendarDate } from '@internationalized/date';
|
|
3
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
4
|
+
import './time-input.css';
|
|
5
|
+
export type TimeInputSize = 's' | 'm';
|
|
6
|
+
/**
|
|
7
|
+
* Prop types for TimeInput
|
|
8
|
+
*/
|
|
9
|
+
export interface TimeInputProps {
|
|
10
|
+
/**
|
|
11
|
+
* Anchor calendar date used for DST-safe conversion math when `timeZone` changes. Defaults to today (in the previous timezone) if omitted — correct for the vast majority of scheduling UIs. Pass a real date (e.g. from Datepicker's selection) for full precision on/near DST transition dates.
|
|
12
|
+
*/
|
|
13
|
+
anchorDate?: CalendarDate;
|
|
14
|
+
/**
|
|
15
|
+
* Additional class names
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Optional default value for the field, as a 24-hour "HH:MM" string (e.g. "14:30"). Setting this prop automatically makes the input uncontrolled. Cannot be used in conjunction with the `value` prop.
|
|
20
|
+
*/
|
|
21
|
+
defaultValue?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Is the field disabled?
|
|
24
|
+
*/
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Hour format. `12` displays hour + AM/PM (e.g. "12:30 PM"); `24` displays a 24-hour hour segment with no AM/PM (e.g. "13:30").
|
|
28
|
+
*/
|
|
29
|
+
hourCycle?: 12 | 24;
|
|
30
|
+
/**
|
|
31
|
+
* Input ID.
|
|
32
|
+
*/
|
|
33
|
+
id: string;
|
|
34
|
+
/**
|
|
35
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
36
|
+
*/
|
|
37
|
+
inputWidth?: number;
|
|
38
|
+
/**
|
|
39
|
+
* Input label.
|
|
40
|
+
*/
|
|
41
|
+
label: string;
|
|
42
|
+
/**
|
|
43
|
+
* Input message. Used to provide supplemental text. Will be displayed below the input field.
|
|
44
|
+
*/
|
|
45
|
+
message?: string | ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* onBlur event handler. Fires when focus leaves the field entirely (not when it moves between segments).
|
|
48
|
+
*/
|
|
49
|
+
onBlur?: () => void;
|
|
50
|
+
/**
|
|
51
|
+
* onChange event handler, called with a 24-hour "HH:MM" string whenever a complete time is entered. Controlled inputs should use this to manage the input value.
|
|
52
|
+
*/
|
|
53
|
+
onChange?: (value: string) => void;
|
|
54
|
+
/**
|
|
55
|
+
* onFocus event handler. Fires when focus enters the field.
|
|
56
|
+
*/
|
|
57
|
+
onFocus?: () => void;
|
|
58
|
+
/**
|
|
59
|
+
* Is this field required?
|
|
60
|
+
*/
|
|
61
|
+
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Should the label be visible? If false, it will render for screen readers only.
|
|
64
|
+
*/
|
|
65
|
+
showLabel?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Input size.
|
|
68
|
+
*/
|
|
69
|
+
size?: TimeInputSize;
|
|
70
|
+
/**
|
|
71
|
+
* IANA timezone identifier (e.g. "America/Los_Angeles", "UTC"). Drives the auto-derived display label (e.g. "PDT") and, when this prop changes, converts the current value into the new zone using `@internationalized/date` — a real, DST-safe conversion, not just a relabel.
|
|
72
|
+
*/
|
|
73
|
+
timeZone?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Optional tooltip text to display additional information.
|
|
76
|
+
*/
|
|
77
|
+
tooltipText?: string | null;
|
|
78
|
+
/**
|
|
79
|
+
* Validation message for the input field based on the validation status.
|
|
80
|
+
*/
|
|
81
|
+
validationMessage?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Validation status of the input field.
|
|
84
|
+
*/
|
|
85
|
+
validationStatus?: ValidationStatus;
|
|
86
|
+
/**
|
|
87
|
+
* Value of the input field, as a 24-hour "HH:MM" string (e.g. "14:30"). Used to set the value of the input field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
|
|
88
|
+
*/
|
|
89
|
+
value?: string;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* TimeInput UI component
|
|
93
|
+
*/
|
|
94
|
+
export declare const TimeInput: ({ anchorDate, className, defaultValue, disabled, hourCycle, id, inputWidth, label, message, onBlur, onChange, onFocus, required, showLabel, size, timeZone, tooltipText, validationMessage, validationStatus, value, }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -46,13 +46,13 @@
|
|
|
46
46
|
--pds-color-button-brand-background-hover
|
|
47
47
|
);--button-background-color-active:var(
|
|
48
48
|
--pds-color-button-brand-background-active
|
|
49
|
-
);--button-box-shadow-active:var(--pds-elevation-button-brand-active);--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight{--button-background-color:var(
|
|
49
|
+
);--button-box-shadow-active:var(--pds-elevation-button-brand-active);--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight{--button-background-color:var(
|
|
50
|
+
--pds-color-button-highlight-background-default
|
|
51
|
+
);--button-background-color-hover:var(
|
|
50
52
|
--pds-color-button-highlight-background-hover
|
|
51
53
|
);--button-background-color-active:var(
|
|
52
54
|
--pds-color-button-highlight-background-active
|
|
53
|
-
);--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(
|
|
54
|
-
--pds-color-interactive-background-current-foreground
|
|
55
|
-
);--button-border-color:var(--pds-color-interactive-background-current);--button-border-color-hover:var(
|
|
55
|
+
);--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(--pds-color-button-highlight-foreground);--button-border-color:var(--pds-color-button-highlight-background-default);--button-border-color-hover:var(
|
|
56
56
|
--pds-color-button-highlight-background-hover
|
|
57
57
|
);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--reverse{--button-background-color:var(--pds-color-button-reverse-background-default);--button-background-color-hover:var(
|
|
58
58
|
--pds-color-button-reverse-background-hover
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer pds-v1, pds-v2;@layer pds-v2{.pds-chart-legend{font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-l)}.pds-chart-legend--inline{align-items:center;display:flex;flex-wrap:wrap;gap:var(--pds-spacing-xl);justify-content:center;margin-inline-start:3.625rem}.pds-chart-legend__item{align-items:center;color:var(--pds-color-foreground-default);display:flex;gap:var(--pds-spacing-3xs)}.pds-chart-legend__swatch{border-radius:2px;display:inline-block;flex-shrink:0;height:10px;width:10px}.pds-chart-legend--table{border:var(--pds-border-width-default) solid var(--pds-color-border-default);border-radius:var(--pds-border-radius-container);margin-inline-start:3.625rem}.pds-chart-legend__table-header{border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);letter-spacing:var(--pds-typography-ls-m);line-height:1;padding:.75rem var(--pds-spacing-s) .625rem;text-transform:uppercase}.pds-chart-legend__table-header,.pds-chart-legend__table-row{align-items:center;display:flex;justify-content:space-between}.pds-chart-legend__table-row{padding:var(--pds-spacing-xs) var(--pds-spacing-s)}.pds-chart-legend__table-row:not(:last-child){border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default)}.pds-chart-legend__table-row-label{align-items:center;color:var(--pds-color-foreground-default);display:flex;font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-xs)}.pds-chart-legend__table-row-value{color:var(--pds-color-foreground-default);font-weight:var(--pds-typography-fw-semibold)}}
|
|
1
|
+
@layer pds-v1, pds-v2;@layer pds-v2{.pds-chart-legend{font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-l)}.pds-chart-legend--inline{align-items:center;display:flex;flex-wrap:wrap;gap:var(--pds-spacing-xl);justify-content:center;margin-inline-start:3.625rem}.pds-chart-legend__item{align-items:center;color:var(--pds-color-foreground-default);display:flex;gap:var(--pds-spacing-3xs)}.pds-chart-legend__swatch{border-radius:2px;display:inline-block;flex-shrink:0;height:10px;width:10px}.pds-chart-legend--table{background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-default);border-radius:var(--pds-border-radius-container);margin-inline-start:3.625rem}.pds-chart-legend__table-header{border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);letter-spacing:var(--pds-typography-ls-m);line-height:1;padding:.75rem var(--pds-spacing-s) .625rem;text-transform:uppercase}.pds-chart-legend__table-header,.pds-chart-legend__table-row{align-items:center;display:flex;justify-content:space-between}.pds-chart-legend__table-row{padding:var(--pds-spacing-xs) var(--pds-spacing-s)}.pds-chart-legend__table-row:not(:last-child){border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default)}.pds-chart-legend__table-row-label{align-items:center;color:var(--pds-color-foreground-default);display:flex;font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-xs)}.pds-chart-legend__table-row-value{color:var(--pds-color-foreground-default);font-weight:var(--pds-typography-fw-semibold)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer pds-v1, pds-v2;@layer pds-v2{.pds-code-block{--code-block-padding:var(--pds-spacing-l);--code-block-background:var(--pds-color-code-block-background);--code-block-foreground:var(--pds-color-code-block-foreground);--code-block-line-prefix:var(--pds-color-code-block-line-prefix);--code-block-focus-color:var(--pds-color-
|
|
1
|
+
@layer pds-v1, pds-v2;@layer pds-v2{.pds-code-block{--code-block-padding:var(--pds-spacing-l);--code-block-background:var(--pds-color-code-block-background);--code-block-foreground:var(--pds-color-code-block-foreground);--code-block-line-prefix:var(--pds-color-code-block-line-prefix);--code-block-focus-color:var(--pds-color-code-block-focus);--pulse-regular-base-color:#c3c5c9;--pulse-bold-base-color:#6a6e7a;display:flex;font-family:var(--pds-typography-font-code);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-l);position:relative}.pds-code-block,div.pds-code-block__code,pre.pds-code-block__code{background-color:var(--code-block-background);border-radius:var(--pds-border-radius-container)}div.pds-code-block__code,pre.pds-code-block__code{flex-grow:1;margin:0;overflow:auto;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}div.pds-code-block__code:focus-visible,pre.pds-code-block__code:focus-visible{outline:var(--pds-border-width-default) solid var(--code-block-focus-color)}div.pds-code-block__code .pds-code-block__content,div.pds-code-block__code .pds-code-block__line-content,div.pds-code-block__code .token.plain,pre.pds-code-block__code .pds-code-block__content,pre.pds-code-block__code .pds-code-block__line-content,pre.pds-code-block__code .token.plain{color:var(--code-block-foreground)}div.pds-code-block__code{padding-block:var(--pds-spacing-xl)}.pds-code-block__line{column-gap:var(--pds-spacing-s);display:table-row}.pds-code-block__line-wrapped{overflow-x:hidden;text-wrap:wrap}.pds-code-block__number,.pds-code-block__prompt{color:var(--code-block-line-prefix);display:table-cell;padding-inline-end:var(--pds-spacing-m);text-align:right}.pds-code-block__copy{padding:var(--pds-spacing-s) var(--pds-spacing-s)}button.pds-clipboard-button{background-color:var(--code-block-background);color:var(--code-block-foreground)}[data-theme=dark] .pds-code-block button.pds-clipboard-button:hover{background-color:hsla(0,0%,100%,.12);color:var(--code-block-foreground)}}
|