softable-pixels-web 1.1.5 → 1.1.7

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.
Files changed (16) hide show
  1. package/dist/{Checkbox-DE2wp1rK.js → Checkbox-6ivVbzcX.js} +2 -2
  2. package/dist/Checkbox-6ivVbzcX.js.map +1 -0
  3. package/dist/{InfoSummary-BwrLkEfC.js → InfoSummary-uorFDD40.js} +10 -9
  4. package/dist/InfoSummary-uorFDD40.js.map +1 -0
  5. package/dist/checkbox.d.ts +1 -1
  6. package/dist/checkbox.js +1 -1
  7. package/dist/{index-DH2bD-Yj.d.ts → index-C9iMLJTU.d.ts} +1 -3
  8. package/dist/{index-CncL-rgW.d.ts → index-DUrGjyKy.d.ts} +3 -3
  9. package/dist/index.d.ts +2 -2
  10. package/dist/index.js +2 -2
  11. package/dist/info-summary.js +1 -1
  12. package/dist/tab-switch.d.ts +1 -1
  13. package/dist/typography.d.ts +2 -2
  14. package/package.json +4 -1
  15. package/dist/Checkbox-DE2wp1rK.js.map +0 -1
  16. package/dist/InfoSummary-BwrLkEfC.js.map +0 -1
package/dist/{Checkbox-DE2wp1rK.js → Checkbox-6ivVbzcX.js} RENAMED
@@ -34,7 +34,7 @@ const Label$1 = (props) => {
34
34
  style: styles.container,
35
35
  children: /* @__PURE__ */ jsx(Typography, {
36
36
  variant: labelVariant ?? "b1",
37
- fontWeight: "normal",
37
+ fontWeight: "regular",
38
38
  children: label
39
39
  })
40
40
  });
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
165
165
 
166
166
  //#endregion
167
167
  export { Checkbox$1 as t };
168
- //# sourceMappingURL=Checkbox-DE2wp1rK.js.map
168
+ //# sourceMappingURL=Checkbox-6ivVbzcX.js.map
package/dist/Checkbox-6ivVbzcX.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox-6ivVbzcX.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.labelVariant, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return styled({\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...CHECKBOX_STYLES.size[size],\n ...CHECKBOX_STYLES.radius[radius],\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n labelVariant,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
package/dist/{InfoSummary-BwrLkEfC.js → InfoSummary-uorFDD40.js} RENAMED
@@ -44,7 +44,6 @@ const SummaryHeader = ({ icon, title }) => {
44
44
  style: styles.textContainer,
45
45
  children: /* @__PURE__ */ jsx(Typography, {
46
46
  variant: "b1",
47
- fontWeight: "bold",
48
47
  lineHeight: "100%",
49
48
  fontSize: "0.75rem",
50
49
  children: title
@@ -146,7 +145,7 @@ const SummaryHighlight = ({ loading, highlightText, highlightIcon }) => {
146
145
  variant: "b1",
147
146
  lineHeight: "100%",
148
147
  fontSize: "0.875rem",
149
- fontWeight: "normal",
148
+ fontWeight: "regular",
150
149
  isLoading: loading,
151
150
  children: highlightText
152
151
  })
@@ -160,14 +159,14 @@ function createSummaryItemStyles(props) {
160
159
  return styled({
161
160
  container: {
162
161
  height: "100%",
163
- borderRight: props.isLast ? "none" : "2px solid var(--border-secondary)"
162
+ borderRight: props.isLast ? "none" : "1px solid var(--border-secondary)"
164
163
  },
165
164
  content: {
166
165
  minWidth: "8rem",
167
166
  height: "100%",
168
167
  display: "flex",
169
168
  flexDirection: "column",
170
- justifyContent: "space-between",
169
+ rowGap: "0.125rem",
171
170
  paddingBlock: "0.5rem",
172
171
  paddingInline: "1rem"
173
172
  }
@@ -206,13 +205,15 @@ const SummaryItem = (props) => {
206
205
  function createInfoSummaryStyles() {
207
206
  return styled({
208
207
  section: {
209
- height: "5.5rem",
210
- minHeight: "5.5rem",
208
+ height: "5rem",
209
+ minHeight: "5rem",
211
210
  width: "fit-content",
212
211
  display: "flex",
213
212
  flexDirection: "row",
214
- alignItems: "flex-start",
215
- backgroundColor: "var(--px-background-card-primary)",
213
+ alignItems: "center",
214
+ borderWidth: 1,
215
+ backgroundColor: "var(--px-bg)",
216
+ borderColor: "var(--px-border-primary)",
216
217
  borderRadius: "10px",
217
218
  paddingBlock: "var(--px-space-sm)"
218
219
  },
@@ -248,4 +249,4 @@ const InfoSummary = ({ infos, loading }) => {
248
249
 
249
250
  //#endregion
250
251
  export { InfoSummary as t };
251
- //# sourceMappingURL=InfoSummary-BwrLkEfC.js.map
252
+ //# sourceMappingURL=InfoSummary-uorFDD40.js.map
package/dist/InfoSummary-uorFDD40.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InfoSummary-uorFDD40.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n gap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n title: string\n icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n return (\n <header style={styles.container}>\n {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n <div style={styles.textContainer}>\n <Typography variant=\"b1\" lineHeight=\"100%\" fontSize=\"0.75rem\">\n {title}\n </Typography>\n </div>\n </header>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '0.625rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyItems: 'start',\n\n columnGap: '0.125rem'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'center',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.textContainer}>\n <Typography\n variant=\"b3\"\n lineHeight=\"100%\"\n isLoading={loading}\n fontSize=\"0.625rem\"\n color=\"var(--px-text-secondary)\"\n >\n {captionText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n columnGap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n lineHeight: '1'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n highlightText?: string\n highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n loading,\n highlightText,\n highlightIcon\n}) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n return (\n <div style={styles.container}>\n {highlightIcon ? (\n <div style={styles.iconContainer}>{highlightIcon}</div>\n ) : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n lineHeight=\"100%\"\n fontSize=\"0.875rem\"\n fontWeight=\"regular\"\n isLoading={loading}\n >\n {highlightText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n return styled({\n container: {\n height: '100%',\n borderRight: props.isLast ? 'none' : '1px solid var(--border-secondary)'\n },\n\n content: {\n minWidth: '8rem',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.125rem',\n paddingBlock: '0.5rem',\n paddingInline: '1rem'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n return (\n <li style={styles.container}>\n <article style={styles.content}>\n <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n <SummaryHighlight\n loading={props.loading}\n highlightText={props.item.highlight}\n highlightIcon={props.item.highlightIcon}\n />\n\n <SummaryCaption\n loading={props.loading}\n captionText={props.item.caption}\n />\n </article>\n </li>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n return styled({\n section: {\n height: '5rem',\n minHeight: '5rem',\n\n width: 'fit-content',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n\n borderWidth: 1,\n backgroundColor: 'var(--px-bg)',\n borderColor: 'var(--px-border-primary)',\n\n borderRadius: '10px',\n paddingBlock: 'var(--px-space-sm)'\n },\n\n summaryListContainer: {\n width: '100%',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n // Functions\n function renderSummaryItems() {\n return (\n <ul style={styles.summaryListContainer}>\n {infos.map((info, index) => (\n <SummaryItem\n item={info}\n key={info.id}\n loading={loading}\n isLast={index === infos.length - 1}\n />\n ))}\n </ul>\n )\n }\n\n return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
package/dist/checkbox.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./types-CDUx-y9q.js";
2
- import { t as Checkbox } from "./index-DH2bD-Yj.js";
2
+ import { t as Checkbox } from "./index-C9iMLJTU.js";
3
3
  export { Checkbox };
package/dist/checkbox.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./Icon-Cv0qztmq.js";
2
2
  import "./useThemedStyles-3rUXJYgS.js";
3
3
  import "./Typography-BE-vQSfx.js";
4
- import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
4
+ import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
5
5
 
6
6
  export { Checkbox };
package/dist/{index-DH2bD-Yj.d.ts → index-C9iMLJTU.d.ts} RENAMED
@@ -1,6 +1,5 @@
1
1
  import { n as TypographyVariant } from "./types-CDUx-y9q.js";
2
2
  import React$1 from "react";
3
- import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
4
3
 
5
4
  //#region src/components/toolkit/Checkbox/types.d.ts
6
5
  type CheckboxSize = 'sm' | 'md' | 'lg';
@@ -16,7 +15,6 @@ interface CheckboxProps {
16
15
  radius?: CheckboxRadius;
17
16
  checked?: boolean;
18
17
  disabled?: boolean;
19
- alert?: ChecklistAlertResponse;
20
18
  labelVariant?: LabelVariant;
21
19
  labelPlacement?: LabelPlacement;
22
20
  labelLineThrough?: boolean;
@@ -28,4 +26,4 @@ interface CheckboxProps {
28
26
  declare const Checkbox: React$1.FC<CheckboxProps>;
29
27
  //#endregion
30
28
  export { Checkbox as t };
31
- //# sourceMappingURL=index-DH2bD-Yj.d.ts.map
29
+ //# sourceMappingURL=index-C9iMLJTU.d.ts.map
package/dist/{index-CncL-rgW.d.ts → index-DUrGjyKy.d.ts} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { t as CommonStyleProps } from "./styleProps-D405c8KF.js";
2
2
  import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
3
3
  import { ReactNode } from "react";
4
- import * as react_jsx_runtime0 from "react/jsx-runtime";
4
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
5
5
 
6
6
  //#region src/components/toolkit/TabSwitch/styles.d.ts
7
7
  declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
@@ -27,7 +27,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
27
27
  }
28
28
  //#endregion
29
29
  //#region src/components/toolkit/TabSwitch/index.d.ts
30
- declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
30
+ declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
31
31
  //#endregion
32
32
  export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
33
- //# sourceMappingURL=index-CncL-rgW.d.ts.map
33
+ //# sourceMappingURL=index-DUrGjyKy.d.ts.map
package/dist/index.d.ts CHANGED
@@ -4,9 +4,9 @@ import { t as IconButton } from "./index-CyvtOmP2.js";
4
4
  import { t as Input } from "./index-pnnP9M22.js";
5
5
  import { t as TextArea } from "./index-BspBF3Mv.js";
6
6
  import { t as CheckItem } from "./index-akSk71wZ.js";
7
- import { t as Checkbox } from "./index-DH2bD-Yj.js";
7
+ import { t as Checkbox } from "./index-C9iMLJTU.js";
8
8
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
9
- import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CncL-rgW.js";
9
+ import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
10
10
  import { Typography } from "./typography.js";
11
11
  import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-CIxyqe-m.js";
12
12
  export { Button, CheckItem, Checkbox, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import "./Icon-Cv0qztmq.js";
2
2
  import "./useThemedStyles-3rUXJYgS.js";
3
3
  import { t as Typography } from "./Typography-BE-vQSfx.js";
4
- import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
4
+ import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
5
5
  import { n as useTheme, t as ThemeProvider } from "./ThemeContext-Dro_peJg.js";
6
6
  import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
7
- import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
7
+ import { t as InfoSummary } from "./InfoSummary-uorFDD40.js";
8
8
  import { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
9
9
  import { t as Button } from "./Button-BiSdxI2A.js";
10
10
  import { t as IconButton } from "./IconButton-BBdkzg3b.js";
package/dist/info-summary.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "./useThemedStyles-3rUXJYgS.js";
2
2
  import "./Typography-BE-vQSfx.js";
3
- import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
3
+ import { t as InfoSummary } from "./InfoSummary-uorFDD40.js";
4
4
 
5
5
  export { InfoSummary };
package/dist/tab-switch.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CncL-rgW.js";
1
+ import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
2
2
  export { SwitchOption, TabSwitch, TabSwitchProps };
package/dist/typography.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { t as TypographyProps } from "./types-CDUx-y9q.js";
2
- import * as react_jsx_runtime1 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/toolkit/Typography/index.d.ts
5
- declare function Typography(props: TypographyProps): react_jsx_runtime1.JSX.Element;
5
+ declare function Typography(props: TypographyProps): react_jsx_runtime0.JSX.Element;
6
6
  //#endregion
7
7
  export { Typography };
8
8
  //# sourceMappingURL=typography.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.1.5",
3
+ "version": "1.1.7",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
@@ -16,6 +16,8 @@
16
16
  ],
17
17
  "scripts": {
18
18
  "test": "echo \"Error: no test specified\" && exit 1",
19
+ "dev": "tsc -p tsconfig.json --watch",
20
+ "build:w": "pnpm build --watch",
19
21
  "build": "npm run generate:icons:node && rm -rf dist && tsdown",
20
22
  "generate:icons": "chmod +x ./scripts/generate-icons.sh && ./scripts/generate-icons.sh",
21
23
  "generate:icons:node": "node ./scripts/generate-icons.mjs"
@@ -79,6 +81,7 @@
79
81
  "devDependencies": {
80
82
  "@biomejs/biome": "2.0.6",
81
83
  "@svgr/cli": "^8.1.0",
84
+ "radix-ui": "^1.4.3",
82
85
  "@svgr/webpack": "^8.1.0",
83
86
  "@types/node": "^18.18.3",
84
87
  "@types/react": "^19.2.7",
package/dist/Checkbox-DE2wp1rK.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox-DE2wp1rK.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.labelVariant, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return styled({\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...CHECKBOX_STYLES.size[size],\n ...CHECKBOX_STYLES.radius[radius],\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n labelVariant,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
package/dist/InfoSummary-BwrLkEfC.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"InfoSummary-BwrLkEfC.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n gap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n title: string\n icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n return (\n <header style={styles.container}>\n {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n fontWeight=\"bold\"\n lineHeight=\"100%\"\n fontSize=\"0.75rem\"\n >\n {title}\n </Typography>\n </div>\n </header>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '0.625rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyItems: 'start',\n\n columnGap: '0.125rem'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'center',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.textContainer}>\n <Typography\n variant=\"b3\"\n lineHeight=\"100%\"\n isLoading={loading}\n fontSize=\"0.625rem\"\n color=\"var(--px-text-secondary)\"\n >\n {captionText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n columnGap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n lineHeight: '1'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n highlightText?: string\n highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n loading,\n highlightText,\n highlightIcon\n}) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n return (\n <div style={styles.container}>\n {highlightIcon ? (\n <div style={styles.iconContainer}>{highlightIcon}</div>\n ) : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n lineHeight=\"100%\"\n fontSize=\"0.875rem\"\n fontWeight=\"normal\"\n isLoading={loading}\n >\n {highlightText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n return styled({\n container: {\n height: '100%',\n borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n },\n\n content: {\n minWidth: '8rem',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n\n paddingBlock: '0.5rem',\n paddingInline: '1rem'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n return (\n <li style={styles.container}>\n <article style={styles.content}>\n <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n <SummaryHighlight\n loading={props.loading}\n highlightText={props.item.highlight}\n highlightIcon={props.item.highlightIcon}\n />\n\n <SummaryCaption\n loading={props.loading}\n captionText={props.item.caption}\n />\n </article>\n </li>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n return styled({\n section: {\n height: '5.5rem',\n minHeight: '5.5rem',\n\n width: 'fit-content',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n\n backgroundColor: 'var(--px-background-card-primary)',\n\n borderRadius: '10px',\n paddingBlock: 'var(--px-space-sm)'\n },\n\n summaryListContainer: {\n width: '100%',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n // Functions\n function renderSummaryItems() {\n return (\n <ul style={styles.summaryListContainer}>\n {infos.map((info, index) => (\n <SummaryItem\n item={info}\n key={info.id}\n loading={loading}\n isLast={index === infos.length - 1}\n />\n ))}\n </ul>\n )\n }\n\n return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}