@xyo-network/react-property 3.0.1 → 3.0.3

package/dist/browser/components/Action.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PropertyAction {
+    disabled?: boolean;
+    icon?: ReactNode;
+    name: string;
+    onClick?: () => void;
+}
+//# sourceMappingURL=Action.d.ts.map

package/dist/browser/components/Action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB"}

package/dist/browser/components/Actions.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PropertyActionsProps } from './ActionsProps.ts';
+export declare const PropertyActions: React.FC<PropertyActionsProps>;
+//# sourceMappingURL=Actions.d.ts.map

package/dist/browser/components/Actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqC1D,CAAA"}

package/dist/browser/components/ActionsMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PropertyActionsProps } from './ActionsProps.ts';
+export declare const PropertyActionsMenu: React.FC<PropertyActionsProps>;
+//# sourceMappingURL=ActionsMenu.d.ts.map

package/dist/browser/components/ActionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmC9D,CAAA"}

package/dist/browser/components/ActionsProps.d.ts

@@ -0,0 +1,7 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { PropertyAction } from './Action.ts';
+export interface PropertyActionsProps extends FlexBoxProps {
+    actions?: PropertyAction[];
+    buttons?: boolean;
+}
+//# sourceMappingURL=ActionsProps.d.ts.map

package/dist/browser/components/ActionsProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsProps.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}

package/dist/browser/components/Group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PropertyGroupProps } from './Props.ts';
+export declare const PropertyGroup: React.FC<PropertyGroupProps>;
+//# sourceMappingURL=Group.d.ts.map

package/dist/browser/components/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACsC,kBAAkB,EACnE,MAAM,YAAY,CAAA;AAiDnB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}

package/dist/browser/components/IdenticonCorner.d.ts

@@ -0,0 +1,7 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import React from 'react';
+export interface IdenticonCornerProps extends FlexBoxProps {
+    value?: string | number | boolean | null;
+}
+export declare const IdenticonCorner: React.FC<IdenticonCornerProps>;
+//# sourceMappingURL=IdenticonCorner.d.ts.map

package/dist/browser/components/IdenticonCorner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdenticonCorner.d.ts","sourceRoot":"","sources":["../../../src/components/IdenticonCorner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAEN,MAAM,OAAO,CAAA;AAEd,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoB1D,CAAA"}

package/dist/browser/components/Property.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PropertyBoxProps, PropertyPaperProps } from './Props.ts';
+export declare const Property: React.ForwardRefExoticComponent<(PropertyBoxProps | Omit<PropertyPaperProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Property.d.ts.map

package/dist/browser/components/Property.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Property.d.ts","sourceRoot":"","sources":["../../../src/components/Property.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EACV,gBAAgB,EAAE,kBAAkB,EACrC,MAAM,YAAY,CAAA;AA0EnB,eAAO,MAAM,QAAQ,6HAEnB,CAAA"}

package/dist/browser/components/Props.d.ts

@@ -0,0 +1,35 @@
+import type { PaperProps } from '@mui/material';
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { SizeProp } from '@xyo-network/react-shared';
+import type { ReactNode } from 'react';
+import type { PropertyAction } from './Action.ts';
+import type { PropertyTitleProps } from './Title.tsx';
+export interface PropertyBaseProps {
+    paper?: boolean;
+    tip?: ReactNode;
+    title?: string;
+    titleProps?: PropertyTitleProps;
+}
+export type PropertyFieldBaseProps = PropertyBaseProps & {
+    actions?: PropertyAction[];
+    badge?: boolean;
+    required?: boolean;
+    size?: SizeProp;
+    value?: string | number | boolean | null;
+};
+export type PropertyBoxProps = PropertyFieldBaseProps & FlexBoxProps & {
+    paper?: false;
+};
+export type PropertyPaperProps = PropertyFieldBaseProps & PaperProps & {
+    paper: true;
+};
+export type PropertyProps = PropertyBoxProps | PropertyPaperProps;
+export type PropertyGroupBaseProps = PropertyBaseProps;
+export type PropertyGroupBoxProps = PropertyGroupBaseProps & FlexBoxProps & {
+    paper?: false;
+};
+export type PropertyGroupPaperProps = PropertyGroupBaseProps & PaperProps & {
+    paper: true;
+};
+export type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps;
+//# sourceMappingURL=Props.d.ts.map

package/dist/browser/components/Props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../src/components/Props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,kBAAkB,CAAA;CAChC;AAED,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG;IACvD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,YAAY,GAAG;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,UAAU,GAAG;IACX,KAAK,EAAE,IAAI,CAAA;CACZ,CAAA;AAEH,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,kBAAkB,CAAA;AAEjE,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAA;AAEtD,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,GACxD,YAAY,GAAG;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAEH,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAC1D,UAAU,GAAG;IACX,KAAK,EAAE,IAAI,CAAA;CACZ,CAAA;AAEH,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GAAG,uBAAuB,CAAA"}

package/dist/browser/components/Title.d.ts

@@ -0,0 +1,14 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { SizeProp } from '@xyo-network/react-shared';
+import type { ReactNode } from 'react';
+import React from 'react';
+export type TitleSizeProp = SizeProp | 'full';
+export interface PropertyTitleProps extends FlexBoxProps {
+    elevation?: number;
+    more?: ReactNode;
+    size?: TitleSizeProp;
+    tip?: ReactNode;
+    title?: string;
+}
+export declare const PropertyTitle: React.FC<PropertyTitleProps>;
+//# sourceMappingURL=Title.d.ts.map

package/dist/browser/components/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyDtD,CAAA"}

package/dist/browser/components/Value.d.ts

@@ -0,0 +1,9 @@
+import type { Variant } from '@mui/material/styles/createTypography.js';
+import type { EllipsizeBoxProps } from '@xyo-network/react-shared';
+import React from 'react';
+export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
+    typographyVariant?: Variant;
+    value?: string | number | boolean | null;
+}
+export declare const PropertyValue: React.ForwardRefExoticComponent<PropertyValueProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Value.d.ts.map

package/dist/browser/components/Value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../src/components/Value.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0CAA0C,CAAA;AACvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAElE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;CACzC;AAED,eAAO,MAAM,aAAa,2FAiBxB,CAAA"}

package/dist/browser/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Action.ts';
+export * from './Group.tsx';
+export * from './Property.tsx';
+export * from './Props.ts';
+export * from './Title.tsx';
+export * from './Value.tsx';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA"}

package/dist/browser/index.d.ts

@@ -1,63 +1,2 @@
-import React, { ReactNode } from 'react';
-import { PaperProps } from '@mui/material';
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { SizeProp, EllipsizeBoxProps } from '@xyo-network/react-shared';
-import { Variant } from '@mui/material/styles/createTypography.js';
-
-interface PropertyAction {
-    disabled?: boolean;
-    icon?: ReactNode;
-    name: string;
-    onClick?: () => void;
-}
-
-type TitleSizeProp = SizeProp | 'full';
-interface PropertyTitleProps extends FlexBoxProps {
-    elevation?: number;
-    more?: ReactNode;
-    size?: TitleSizeProp;
-    tip?: ReactNode;
-    title?: string;
-}
-declare const PropertyTitle: React.FC<PropertyTitleProps>;
-
-interface PropertyBaseProps {
-    paper?: boolean;
-    tip?: ReactNode;
-    title?: string;
-    titleProps?: PropertyTitleProps;
-}
-type PropertyFieldBaseProps = PropertyBaseProps & {
-    actions?: PropertyAction[];
-    badge?: boolean;
-    required?: boolean;
-    size?: SizeProp;
-    value?: string | number | boolean | null;
-};
-type PropertyBoxProps = PropertyFieldBaseProps & FlexBoxProps & {
-    paper?: false;
-};
-type PropertyPaperProps = PropertyFieldBaseProps & PaperProps & {
-    paper: true;
-};
-type PropertyProps = PropertyBoxProps | PropertyPaperProps;
-type PropertyGroupBaseProps = PropertyBaseProps;
-type PropertyGroupBoxProps = PropertyGroupBaseProps & FlexBoxProps & {
-    paper?: false;
-};
-type PropertyGroupPaperProps = PropertyGroupBaseProps & PaperProps & {
-    paper: true;
-};
-type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps;
-
-declare const PropertyGroup: React.FC<PropertyGroupProps>;
-
-declare const Property: React.ForwardRefExoticComponent<(PropertyBoxProps | Omit<PropertyPaperProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
-
-interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
-    typographyVariant?: Variant;
-    value?: string | number | boolean | null;
-}
-declare const PropertyValue: React.ForwardRefExoticComponent<PropertyValueProps & React.RefAttributes<HTMLDivElement>>;
-
-export { Property, type PropertyAction, type PropertyBaseProps, type PropertyBoxProps, type PropertyFieldBaseProps, PropertyGroup, type PropertyGroupBaseProps, type PropertyGroupBoxProps, type PropertyGroupPaperProps, type PropertyGroupProps, type PropertyPaperProps, type PropertyProps, PropertyTitle, type PropertyTitleProps, PropertyValue, type PropertyValueProps, type TitleSizeProp };
+export * from './components/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport React, { ReactElement } from 'react'\n\nimport { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {\n  const theme = useTheme()\n  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n  return (\n    <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n        <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n        {childrenArray\n          ? (\n              <FlexGrowRow>\n                {childrenArray?.map((child, index) => {\n                  return child\n                    ? (\n                        <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                          {child}\n                        </FlexGrowRow>\n                      )\n                    : null\n                })}\n              </FlexGrowRow>\n            )\n          : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {\n  return (\n    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyGroupBox {...props} paper={false} />\n    </Paper>\n  )\n}\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {\n  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />\n}\n","import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport React, { ReactNode } from 'react'\n\nexport type TitleSizeProp = SizeProp | 'full'\n\nexport interface PropertyTitleProps extends FlexBoxProps {\n  elevation?: number\n  more?: ReactNode\n  size?: TitleSizeProp\n  tip?: ReactNode\n  title?: string\n}\n\nexport const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {\n  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {\n    full: 'caption',\n    large: 'caption',\n    medium: 'caption',\n    small: 'caption',\n  }\n\n  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {\n    full: undefined,\n    large: 32,\n    medium: 20,\n    small: 16,\n  }\n\n  const sizeFontSize: Record<TitleSizeProp, number> = {\n    full: 16,\n    large: 16,\n    medium: 14,\n    small: 10,\n  }\n\n  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark'\n          ? lighten(theme.palette.background.paper, 0.05 * elevation)\n          : darken(theme.palette.background.paper, 0.025 * elevation)\n      }\n      alignItems=\"center\"\n      height={sizeTitleHeight[size]}\n      justifyContent=\"space-between\"\n      {...props}\n    >\n      <FlexRow paddingX={1} paddingY={0.5}>\n        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n          <small>\n            <strong>{title}</strong>\n          </small>\n        </Typography>\n        {tip\n          ? (\n              <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n                {tip}\n              </QuickTipButton>\n            )\n          : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import { CircularProgress, Paper, TypographyVariant } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { SizeProp } from '@xyo-network/react-shared'\nimport React, { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {\n    const sizeValueHeight: Record<SizeProp, number> = {\n      large: 48,\n      medium: 36,\n      small: 24,\n    }\n\n    const sizeVariants: Record<SizeProp, TypographyVariant> = {\n      large: 'h6',\n      medium: 'body1',\n      small: 'body2',\n    }\n\n    return (\n      <FlexRow ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined\n          ? null\n          : (\n              <PropertyTitle\n                tip={tip}\n                title={required ? `${title}*` : title}\n                size={size}\n                more={<PropertyActionsMenu actions={actions} />}\n                {...titleProps}\n              />\n            )}\n        <FlexRow\n          pl={1}\n          columnGap={1}\n          justifyContent={value === undefined ? 'center' : 'space-between'}\n          overflow=\"hidden\"\n          height={sizeValueHeight[size]}\n        >\n          {(children ?? value === undefined)\n            ? <CircularProgress size={16} />\n            : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />}\n          {value === undefined\n            ? null\n            : badge\n              ? <IdenticonCorner value={value} />\n              : null}\n        </FlexRow>\n      </FlexRow>\n    )\n  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {\n  return (\n    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport { IconButton, Menu, MenuItem } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = !!anchorEl\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return actions && actions?.length > 0\n    ? (\n        <FlexRow {...props}>\n          <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n            <MoreHorizIcon fontSize=\"inherit\" />\n          </IconButton>\n          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n            {actions?.map((action) => {\n              return (\n                <MenuItem\n                  key={action.name}\n                  onClick={() => {\n                    action?.onClick?.()\n                    handleClose()\n                  }}\n                >\n                  {action.name}\n                </MenuItem>\n              )\n            })}\n          </Menu>\n        </FlexRow>\n      )\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, { useEffect, useRef, useState } from 'react'\n\nexport interface IdenticonCornerProps extends FlexBoxProps {\n  value?: string | number | boolean | null\n}\n\nexport const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {\n  const theme = useTheme()\n  const [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\n\n  const calculatedHeight = parentHeight ?? 0\n\n  return (\n    <FlexRow alignItems=\"flex-start\" height=\"100%\">\n      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>\n        <div ref={ref}>\n          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />\n        </div>\n      </FlexRow>\n    </FlexRow>\n  )\n}\n","// eslint-disable-next-line import-x/no-internal-modules\nimport { Variant } from '@mui/material/styles/createTypography.js'\nimport { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport React, { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {\n  return value === undefined\n    ? null\n    : (\n        <EllipsizeBox\n          typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}\n          width=\"100%\"\n          ref={ref}\n          {...props}\n        >\n          {value}\n        </EllipsizeBox>\n      )\n})\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["Paper","useTheme","FlexCol","FlexGrowRow","FlexRow","typeOf","React","darken","lighten","Typography","useTheme","FlexRow","QuickTipButton","React","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","full","large","medium","small","sizeTitleHeight","undefined","sizeFontSize","quickTipSize","theme","useTheme","FlexRow","bgcolor","palette","mode","lighten","background","paper","darken","alignItems","height","justifyContent","paddingX","paddingY","Typography","fontWeight","noWrap","variant","fontSize","strong","QuickTipButton","style","color","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","undefined","React","FlexCol","alignItems","overflow","FlexRow","justifyContent","PropertyTitle","size","FlexGrowRow","map","child","index","key","borderLeft","borderColor","palette","divider","PropertyGroupPaper","style","variant","elevation","square","Paper","minWidth","paper","PropertyGroup","CircularProgress","Paper","FlexRow","React","forwardRef","MoreHoriz","MoreHorizIcon","IconButton","Menu","MenuItem","FlexRow","React","useState","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","useState","open","handleClick","event","currentTarget","handleClose","length","React","FlexRow","IconButton","size","color","onClick","MoreHorizIcon","fontSize","Menu","onClose","map","action","MenuItem","key","name","useTheme","FlexRow","Identicon","React","useEffect","useRef","useState","IdenticonCorner","value","props","theme","useTheme","parentHeight","setParentHeight","useState","ref","useRef","useEffect","current","parentElement","clientHeight","calculatedHeight","React","FlexRow","alignItems","height","background","width","borderLeft","palette","divider","div","Identicon","size","sx","padding","EllipsizeBox","React","forwardRef","PropertyValue","typographyVariant","value","props","ref","undefined","typographyProps","component","title","toString","variant","width","displayName","PropertyBox","forwardRef","titleProps","title","value","children","size","tip","actions","required","badge","props","ref","sizeValueHeight","large","medium","small","sizeVariants","React","FlexRow","flexDirection","minWidth","alignItems","overflow","undefined","PropertyTitle","more","PropertyActionsMenu","pl","columnGap","justifyContent","height","CircularProgress","PropertyValue","typographyVariant","IdenticonCorner","displayName","PropertyPaper","style","variant","elevation","square","Paper","paper","Property"]}
+{"version":3,"sources":["../../src/components/Group.tsx","../../src/components/Title.tsx","../../src/components/Property.tsx","../../src/components/ActionsMenu.tsx","../../src/components/IdenticonCorner.tsx","../../src/components/Value.tsx"],"sourcesContent":["import { Paper, useTheme } from '@mui/material'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { typeOf } from '@xyo-network/typeof'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport type {\n  PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\n\nconst PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({\n  titleProps, children, title, tip, ...props\n}) => {\n  const theme = useTheme()\n  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined\n  return (\n    <FlexCol alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n      <FlexRow overflow=\"hidden\" justifyContent=\"stretch\" alignItems=\"stretch\">\n        <PropertyTitle alignItems=\"flex-start\" size=\"full\" title={title} tip={tip} {...titleProps} />\n        {childrenArray\n          ? (\n              <FlexGrowRow>\n                {childrenArray?.map((child, index) => {\n                  return child\n                    ? (\n                        <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>\n                          {child}\n                        </FlexGrowRow>\n                      )\n                    : null\n                })}\n              </FlexGrowRow>\n            )\n          : <FlexGrowRow overflow=\"hidden\">{children}</FlexGrowRow>}\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nconst PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({\n  style, variant, elevation, square, ...props\n}) => {\n  return (\n    <Paper\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyGroupBox {...props} paper={false} />\n    </Paper>\n  )\n}\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {\n  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />\n}\n","import type { TypographyVariant } from '@mui/material'\nimport {\n  darken, lighten, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport type TitleSizeProp = SizeProp | 'full'\n\nexport interface PropertyTitleProps extends FlexBoxProps {\n  elevation?: number\n  more?: ReactNode\n  size?: TitleSizeProp\n  tip?: ReactNode\n  title?: string\n}\n\nexport const PropertyTitle: React.FC<PropertyTitleProps> = ({\n  elevation = 1, size = 'medium', tip, more, title, ...props\n}) => {\n  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {\n    full: 'caption',\n    large: 'caption',\n    medium: 'caption',\n    small: 'caption',\n  }\n\n  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {\n    full: undefined,\n    large: 32,\n    medium: 20,\n    small: 16,\n  }\n\n  const sizeFontSize: Record<TitleSizeProp, number> = {\n    full: 16,\n    large: 16,\n    medium: 14,\n    small: 10,\n  }\n\n  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16\n\n  const theme = useTheme()\n\n  return (\n    <FlexRow\n      bgcolor={\n        theme.palette.mode === 'dark'\n          ? lighten(theme.palette.background.paper, 0.05 * elevation)\n          : darken(theme.palette.background.paper, 0.025 * elevation)\n      }\n      alignItems=\"center\"\n      height={sizeTitleHeight[size]}\n      justifyContent=\"space-between\"\n      {...props}\n    >\n      <FlexRow paddingX={1} paddingY={0.5}>\n        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>\n          <small>\n            <strong>{title}</strong>\n          </small>\n        </Typography>\n        {tip\n          ? (\n              <QuickTipButton style={{ fontSize: quickTipSize }} color=\"inherit\" title={title ?? ''}>\n                {tip}\n              </QuickTipButton>\n            )\n          : null}\n      </FlexRow>\n      {more}\n    </FlexRow>\n  )\n}\n","import type { TypographyVariant } from '@mui/material'\nimport { CircularProgress, Paper } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport React, { forwardRef } from 'react'\n\nimport { PropertyActionsMenu } from './ActionsMenu.tsx'\nimport { IdenticonCorner } from './IdenticonCorner.tsx'\nimport type {\n  PropertyBoxProps, PropertyPaperProps, PropertyProps,\n} from './Props.ts'\nimport { PropertyTitle } from './Title.tsx'\nimport { PropertyValue } from './Value.tsx'\n\nconst PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(\n  ({\n    titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props\n  }, ref) => {\n    const sizeValueHeight: Record<SizeProp, number> = {\n      large: 48,\n      medium: 36,\n      small: 24,\n    }\n\n    const sizeVariants: Record<SizeProp, TypographyVariant> = {\n      large: 'h6',\n      medium: 'body1',\n      small: 'body2',\n    }\n\n    return (\n      <FlexRow ref={ref} flexDirection=\"column\" minWidth={0} alignItems=\"stretch\" overflow=\"hidden\" {...props}>\n        {title === undefined\n          ? null\n          : (\n              <PropertyTitle\n                tip={tip}\n                title={required ? `${title}*` : title}\n                size={size}\n                more={<PropertyActionsMenu actions={actions} />}\n                {...titleProps}\n              />\n            )}\n        <FlexRow\n          pl={1}\n          columnGap={1}\n          justifyContent={value === undefined ? 'center' : 'space-between'}\n          overflow=\"hidden\"\n          height={sizeValueHeight[size]}\n        >\n          {(children ?? value === undefined)\n            ? <CircularProgress size={16} />\n            : <PropertyValue value={value} typographyVariant={sizeVariants[size]} />}\n          {value === undefined\n            ? null\n            : badge\n              ? <IdenticonCorner value={value} />\n              : null}\n        </FlexRow>\n      </FlexRow>\n    )\n  },\n)\nPropertyBox.displayName = 'PropertyBox'\n\nconst PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({\n  style, variant, elevation = 2, square, ...props\n}, ref) => {\n  return (\n    <Paper\n      ref={ref}\n      style={{\n        minWidth: 0, overflow: 'hidden', ...style,\n      }}\n      variant={variant}\n      elevation={elevation}\n      square={square}\n    >\n      <PropertyBox {...props} paper={false} />\n    </Paper>\n  )\n})\nPropertyPaper.displayName = 'PropertyPaper'\n\nexport const Property = forwardRef<HTMLDivElement, PropertyProps>((props, ref) => {\n  return props.paper ? <PropertyPaper ref={ref} {...props} /> : <PropertyBox ref={ref} {...props} />\n})\nProperty.displayName = 'Property'\n","import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'\nimport {\n  IconButton, Menu, MenuItem,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport type { PropertyActionsProps } from './ActionsProps.ts'\n\nexport const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const open = !!anchorEl\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return actions && actions?.length > 0\n    ? (\n        <FlexRow {...props}>\n          <IconButton size=\"small\" color=\"inherit\" onClick={handleClick}>\n            <MoreHorizIcon fontSize=\"inherit\" />\n          </IconButton>\n          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n            {actions?.map((action) => {\n              return (\n                <MenuItem\n                  key={action.name}\n                  onClick={() => {\n                    action?.onClick?.()\n                    handleClose()\n                  }}\n                >\n                  {action.name}\n                </MenuItem>\n              )\n            })}\n          </Menu>\n        </FlexRow>\n      )\n    : null\n}\n","import { useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { Identicon } from '@xylabs/react-identicon'\nimport React, {\n  useEffect, useRef, useState,\n} from 'react'\n\nexport interface IdenticonCornerProps extends FlexBoxProps {\n  value?: string | number | boolean | null\n}\n\nexport const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {\n  const theme = useTheme()\n  const [parentHeight, setParentHeight] = useState<number>()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)\n  }, [])\n\n  const calculatedHeight = parentHeight ?? 0\n\n  return (\n    <FlexRow alignItems=\"flex-start\" height=\"100%\">\n      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>\n        <div ref={ref}>\n          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />\n        </div>\n      </FlexRow>\n    </FlexRow>\n  )\n}\n","// eslint-disable-next-line import-x/no-internal-modules\nimport type { Variant } from '@mui/material/styles/createTypography.js'\nimport type { EllipsizeBoxProps } from '@xyo-network/react-shared'\nimport { EllipsizeBox } from '@xyo-network/react-shared'\nimport React, { forwardRef } from 'react'\n\nexport interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {\n  typographyVariant?: Variant\n  value?: string | number | boolean | null\n}\n\nexport const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({\n  typographyVariant = 'body1', value, ...props\n}, ref) => {\n  return value === undefined\n    ? null\n    : (\n        <EllipsizeBox\n          typographyProps={{\n            component: undefined, title: value?.toString(), variant: typographyVariant,\n          }}\n          width=\"100%\"\n          ref={ref}\n          {...props}\n        >\n          {value}\n        </EllipsizeBox>\n      )\n})\n\nPropertyValue.displayName = 'PropertyValue'\n"],"mappings":"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","names":["Paper","useTheme","FlexCol","FlexGrowRow","FlexRow","typeOf","React","darken","lighten","Typography","useTheme","FlexRow","QuickTipButton","React","PropertyTitle","elevation","size","tip","more","title","props","sizeVariants","full","large","medium","small","sizeTitleHeight","undefined","sizeFontSize","quickTipSize","theme","useTheme","FlexRow","bgcolor","palette","mode","lighten","background","paper","darken","alignItems","height","justifyContent","paddingX","paddingY","Typography","fontWeight","noWrap","variant","fontSize","strong","QuickTipButton","style","color","PropertyGroupBox","titleProps","children","title","tip","props","theme","useTheme","childrenArray","typeOf","undefined","React","FlexCol","alignItems","overflow","FlexRow","justifyContent","PropertyTitle","size","FlexGrowRow","map","child","index","key","borderLeft","borderColor","palette","divider","PropertyGroupPaper","style","variant","elevation","square","Paper","minWidth","paper","PropertyGroup","CircularProgress","Paper","FlexRow","React","forwardRef","MoreHoriz","MoreHorizIcon","IconButton","Menu","MenuItem","FlexRow","React","useState","PropertyActionsMenu","actions","props","anchorEl","setAnchorEl","useState","open","handleClick","event","currentTarget","handleClose","length","React","FlexRow","IconButton","size","color","onClick","MoreHorizIcon","fontSize","Menu","onClose","map","action","MenuItem","key","name","useTheme","FlexRow","Identicon","React","useEffect","useRef","useState","IdenticonCorner","value","props","theme","useTheme","parentHeight","setParentHeight","useState","ref","useRef","useEffect","current","parentElement","clientHeight","calculatedHeight","React","FlexRow","alignItems","height","background","width","borderLeft","palette","divider","div","Identicon","size","sx","padding","EllipsizeBox","React","forwardRef","PropertyValue","typographyVariant","value","props","ref","undefined","typographyProps","component","title","toString","variant","width","displayName","PropertyBox","forwardRef","titleProps","title","value","children","size","tip","actions","required","badge","props","ref","sizeValueHeight","large","medium","small","sizeVariants","React","FlexRow","flexDirection","minWidth","alignItems","overflow","undefined","PropertyTitle","more","PropertyActionsMenu","pl","columnGap","justifyContent","height","CircularProgress","PropertyValue","typographyVariant","IdenticonCorner","displayName","PropertyPaper","style","variant","elevation","square","Paper","paper","Property"]}

package/package.json

@@ -1,37 +1,30 @@
 {
   "name": "@xyo-network/react-property",
-  "author": {
-    "email": "support@xyo.network",
-    "name": "XYO Development Team",
-    "url": "https://xyo.network"
-  },
+  "version": "3.0.3",
+  "description": "Common React library for all XYO projects that use React",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xyo.network",
   "bugs": {
-    "email": "support@xyo.network",
-    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
-  },
-  "dependencies": {
-    "@xylabs/react-button": "^4.0.1",
-    "@xylabs/react-flexbox": "^4.0.1",
-    "@xylabs/react-identicon": "^4.0.1",
-    "@xylabs/react-quick-tip-button": "^4.0.1",
-    "@xyo-network/react-shared": "^3.0.1",
-    "@xyo-network/typeof": "^3.0.2"
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
+    "email": "support@xyo.network"
   },
-  "peerDependencies": {
-    "@mui/icons-material": "^5",
-    "@mui/material": "^5",
-    "@mui/styles": "^5",
-    "react": "^18",
-    "react-dom": "^18"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
   },
-  "devDependencies": {
-    "@storybook/react": "^8.2.9",
-    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.15",
-    "@xylabs/tsconfig-react": "^4.0.0-rc.15",
-    "typescript": "^5.5.4"
+  "license": "LGPL-3.0-only",
+  "author": {
+    "name": "XYO Development Team",
+    "email": "support@xyo.network",
+    "url": "https://xyo.network"
   },
-  "description": "Common React library for all XYO projects that use React",
-  "docs": "dist/docs.json",
+  "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
       "import": {
@@ -44,27 +37,40 @@
     "./package.json": "./package.json"
   },
   "module": "dist/browser/index.mjs",
-  "homepage": "https://xyo.network",
-  "keywords": [
-    "xyo",
-    "utility",
-    "typescript",
-    "react"
-  ],
-  "license": "LGPL-3.0-only",
-  "publishConfig": {
-    "access": "public"
+  "types": "dist/browser/index.d.ts",
+  "scripts": {
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+    "lint-pkg": "npmPkgJsonLint ."
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  "dependencies": {
+    "@xylabs/react-button": "^4.0.3",
+    "@xylabs/react-flexbox": "^4.0.3",
+    "@xylabs/react-identicon": "^4.0.3",
+    "@xylabs/react-quick-tip-button": "^4.0.3",
+    "@xyo-network/react-shared": "^3.0.3",
+    "@xyo-network/typeof": "^3.0.15"
   },
-  "scripts": {
-    "lint-pkg": "npmPkgJsonLint .",
-    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  "devDependencies": {
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
+    "@storybook/react": "^8.2.9",
+    "@xylabs/ts-scripts-yarn3": "^4.0.7",
+    "@xylabs/tsconfig-react": "^4.0.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.4"
   },
-  "sideEffects": false,
-  "types": "dist/browser/index.d.ts",
-  "version": "3.0.1",
-  "type": "module"
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "docs": "dist/docs.json"
 }

package/src/components/Action.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 export interface PropertyAction {
   disabled?: boolean

package/src/components/Actions.tsx

@@ -3,9 +3,11 @@ import { ButtonEx } from '@xylabs/react-button'
 import { FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
-import { PropertyActionsProps } from './ActionsProps.ts'
+import type { PropertyActionsProps } from './ActionsProps.ts'
 
-export const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {
+export const PropertyActions: React.FC<PropertyActionsProps> = ({
+  buttons = false, actions, ...props
+}) => {
   if (actions) {
     return (actions?.length ?? 0) > 0
       ? (

package/src/components/ActionsMenu.tsx

@@ -1,9 +1,11 @@
 import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'
-import { IconButton, Menu, MenuItem } from '@mui/material'
+import {
+  IconButton, Menu, MenuItem,
+} from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import React, { useState } from 'react'
 
-import { PropertyActionsProps } from './ActionsProps.ts'
+import type { PropertyActionsProps } from './ActionsProps.ts'
 
 export const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

package/src/components/ActionsProps.ts

@@ -1,6 +1,6 @@
-import { FlexBoxProps } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
 
-import { PropertyAction } from './Action.ts'
+import type { PropertyAction } from './Action.ts'
 
 export interface PropertyActionsProps extends FlexBoxProps {
   actions?: PropertyAction[]

package/src/components/Group.tsx

@@ -1,12 +1,19 @@
 import { Paper, useTheme } from '@mui/material'
-import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import {
+  FlexCol, FlexGrowRow, FlexRow,
+} from '@xylabs/react-flexbox'
 import { typeOf } from '@xyo-network/typeof'
-import React, { ReactElement } from 'react'
+import type { ReactElement } from 'react'
+import React from 'react'
 
-import { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props.ts'
+import type {
+  PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps,
+} from './Props.ts'
 import { PropertyTitle } from './Title.tsx'
 
-const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {
+const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({
+  titleProps, children, title, tip, ...props
+}) => {
   const theme = useTheme()
   const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
   return (
@@ -33,9 +40,18 @@ const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, childre
   )
 }
 
-const PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {
+const PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({
+  style, variant, elevation, square, ...props
+}) => {
   return (
-    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+    <Paper
+      style={{
+        minWidth: 0, overflow: 'hidden', ...style,
+      }}
+      variant={variant}
+      elevation={elevation}
+      square={square}
+    >
       <PropertyGroupBox {...props} paper={false} />
     </Paper>
   )

package/src/components/IdenticonCorner.tsx

@@ -1,7 +1,10 @@
 import { useTheme } from '@mui/material'
-import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import { Identicon } from '@xylabs/react-identicon'
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect, useRef, useState,
+} from 'react'
 
 export interface IdenticonCornerProps extends FlexBoxProps {
   value?: string | number | boolean | null

package/src/components/Property.tsx

@@ -1,16 +1,21 @@
-import { CircularProgress, Paper, TypographyVariant } from '@mui/material'
+import type { TypographyVariant } from '@mui/material'
+import { CircularProgress, Paper } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
-import { SizeProp } from '@xyo-network/react-shared'
+import type { SizeProp } from '@xyo-network/react-shared'
 import React, { forwardRef } from 'react'
 
 import { PropertyActionsMenu } from './ActionsMenu.tsx'
 import { IdenticonCorner } from './IdenticonCorner.tsx'
-import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props.ts'
+import type {
+  PropertyBoxProps, PropertyPaperProps, PropertyProps,
+} from './Props.ts'
 import { PropertyTitle } from './Title.tsx'
 import { PropertyValue } from './Value.tsx'
 
 const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
-  ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }, ref) => {
+  ({
+    titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props
+  }, ref) => {
     const sizeValueHeight: Record<SizeProp, number> = {
       large: 48,
       medium: 36,
@@ -58,9 +63,19 @@ const PropertyBox = forwardRef<HTMLDivElement, PropertyBoxProps>(
 )
 PropertyBox.displayName = 'PropertyBox'
 
-const PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({ style, variant, elevation = 2, square, ...props }, ref) => {
+const PropertyPaper = forwardRef<HTMLDivElement, PropertyPaperProps>(({
+  style, variant, elevation = 2, square, ...props
+}, ref) => {
   return (
-    <Paper ref={ref} style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+    <Paper
+      ref={ref}
+      style={{
+        minWidth: 0, overflow: 'hidden', ...style,
+      }}
+      variant={variant}
+      elevation={elevation}
+      square={square}
+    >
       <PropertyBox {...props} paper={false} />
     </Paper>
   )

package/src/components/PropertyBox.stories.tsx

@@ -1,20 +1,16 @@
 import { Replay as ReplayIcon } from '@mui/icons-material'
 import { TextField } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { Property } from './Property.tsx'
-import { PropertyProps } from './Props.ts'
+import type { PropertyProps } from './Props.ts'
 
 const StorybookEntry = {
   argTypes: {},
   component: Property,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'property/PropertyBox',
 } as Meta<typeof Property>
 

package/src/components/PropertyPaper.stories.tsx

@@ -1,20 +1,16 @@
 import { Replay as ReplayIcon } from '@mui/icons-material'
 import { TextField } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
 import { Property } from './Property.tsx'
-import { PropertyPaperProps, PropertyProps } from './Props.ts'
+import type { PropertyPaperProps, PropertyProps } from './Props.ts'
 
 const StorybookEntry = {
   argTypes: {},
   component: Property,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'property/PropertyPaper',
 } as Meta<typeof Property>
 

package/src/components/Props.ts

@@ -1,10 +1,10 @@
-import { PaperProps } from '@mui/material'
-import { FlexBoxProps } from '@xylabs/react-flexbox'
-import { SizeProp } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
+import type { PaperProps } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import type { SizeProp } from '@xyo-network/react-shared'
+import type { ReactNode } from 'react'
 
-import { PropertyAction } from './Action.ts'
-import { PropertyTitleProps } from './Title.tsx'
+import type { PropertyAction } from './Action.ts'
+import type { PropertyTitleProps } from './Title.tsx'
 
 export interface PropertyBaseProps {
   paper?: boolean

package/src/components/Title.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { PropertyTitle } from './Title.tsx'
@@ -6,11 +6,7 @@ import { PropertyTitle } from './Title.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: PropertyTitle,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'property/Title',
 } as Meta<typeof PropertyTitle>
 
@@ -27,6 +23,8 @@ const WithDataAndActions = Template.bind({})
 
 WithDataAndActions.args = { title: 'Sample Title' }
 
-export { Default, WithData, WithDataAndActions }
+export {
+  Default, WithData, WithDataAndActions,
+}
 
 export default StorybookEntry

package/src/components/Title.tsx

@@ -1,8 +1,13 @@
-import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'
-import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import type { TypographyVariant } from '@mui/material'
+import {
+  darken, lighten, Typography, useTheme,
+} from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import { SizeProp } from '@xyo-network/react-shared'
-import React, { ReactNode } from 'react'
+import type { SizeProp } from '@xyo-network/react-shared'
+import type { ReactNode } from 'react'
+import React from 'react'
 
 export type TitleSizeProp = SizeProp | 'full'
 
@@ -14,7 +19,9 @@ export interface PropertyTitleProps extends FlexBoxProps {
   title?: string
 }
 
-export const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {
+export const PropertyTitle: React.FC<PropertyTitleProps> = ({
+  elevation = 1, size = 'medium', tip, more, title, ...props
+}) => {
   const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {
     full: 'caption',
     large: 'caption',

package/src/components/Value.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
 import { PropertyValue } from './Value.tsx'
@@ -6,11 +6,7 @@ import { PropertyValue } from './Value.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: PropertyValue,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'property/Value',
 } as Meta<typeof PropertyValue>
 

package/src/components/Value.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import-x/no-internal-modules
-import { Variant } from '@mui/material/styles/createTypography.js'
-import { EllipsizeBox, EllipsizeBoxProps } from '@xyo-network/react-shared'
+import type { Variant } from '@mui/material/styles/createTypography.js'
+import type { EllipsizeBoxProps } from '@xyo-network/react-shared'
+import { EllipsizeBox } from '@xyo-network/react-shared'
 import React, { forwardRef } from 'react'
 
 export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
@@ -8,12 +9,16 @@ export interface PropertyValueProps extends Omit<EllipsizeBoxProps, 'ref'> {
   value?: string | number | boolean | null
 }
 
-export const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({ typographyVariant = 'body1', value, ...props }, ref) => {
+export const PropertyValue = forwardRef<HTMLDivElement, PropertyValueProps>(({
+  typographyVariant = 'body1', value, ...props
+}, ref) => {
   return value === undefined
     ? null
     : (
         <EllipsizeBox
-          typographyProps={{ component: undefined, title: value?.toString(), variant: typographyVariant }}
+          typographyProps={{
+            component: undefined, title: value?.toString(), variant: typographyVariant,
+          }}
           width="100%"
           ref={ref}
           {...props}

package/xy.config.ts

@@ -1,9 +1,7 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },