pragmate-ui/components/components.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/base';
import * as dependency_4 from 'pragmate-ui/icons';
import * as dependency_5 from 'pragmate-ui/spinner';
import * as dependency_6 from '@beyond-js/kernel/routing';
import * as dependency_7 from 'pragmate-ui/ripple';
import * as dependency_8 from 'tippy.js';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/components"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['pragmate-ui/base', dependency_3],['pragmate-ui/icons', dependency_4],['pragmate-ui/spinner', dependency_5],['@beyond-js/kernel/routing', dependency_6],['pragmate-ui/ripple', dependency_7],['tippy.js', dependency_8]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/components')


const ims = new Map();

/*******************************************
INTERNAL MODULE: ./button-group/button-group
*******************************************/

ims.set('./button-group/button-group', {hash: 686490675, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonGroup = ButtonGroup;
var _react = require("react");
var _context = require("./context");
/*bundle*/function ButtonGroup({
  orientation = 'row',
  children,
  onChange,
  ...props
}) {
  const [selected, setSelected] = _react.default.useState(props.selected);
  let cls = `pui-button-group`;
  cls += orientation ? ` pui-button-group ${orientation}` : '';
  let disabled = !!props.disabled;
  _react.default.useEffect(() => {
    setSelected(props.selected);
  }, [props.selected]);
  const childrenWithProps = _react.default.Children.map(children, (child, index) => {
    if (_react.default.isValidElement(child)) {
      return _react.default.cloneElement(child, {
        index,
        disabled,
        onClick: onChange
      }); // Passing the index as a prop
    }
  });
  return _react.default.createElement(_context.ButtonGroupContext.Provider, {
    value: {
      selected,
      setSelected
    }
  }, _react.default.createElement("div", {
    className: cls
  }, childrenWithProps));
}
}});

/**************************************
INTERNAL MODULE: ./button-group/context
**************************************/

ims.set('./button-group/context', {hash: 2338960457, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useButtonGroupContext = exports.ButtonGroupContext = void 0;
var _react = require("react");
const ButtonGroupContext = exports.ButtonGroupContext = _react.default.createContext({});
const useButtonGroupContext = () => _react.default.useContext(ButtonGroupContext);
exports.useButtonGroupContext = useButtonGroupContext;
}});

/***********************************
INTERNAL MODULE: ./button-group/type
***********************************/

ims.set('./button-group/type', {hash: 3900894228, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/*******************************
INTERNAL MODULE: ./button/button
*******************************/

ims.set('./button/button', {hash: 28591129, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _spinner = require("pragmate-ui/spinner");
var _context = require("../button-group/context");
var _useRipple = require("../use-ripple");
const {
  forwardRef
} = _react.default;
/*bundle*/const Button = exports.Button = forwardRef((props, reference) => {
  const {
    className,
    onClick,
    data,
    label,
    title,
    children,
    icon,
    loading,
    block,
    index,
    fetching = false,
    variant = 'default',
    bordered = false,
    sizing = 'md',
    disabled = false,
    ...otherProps
  } = props;
  const context = _react.default.useContext(_context.ButtonGroupContext);
  const [, setProcessing] = _react.default.useState(fetching || loading);
  const ref = (0, _useRipple.useRipple)(title, reference);
  const usingContext = typeof context?.setSelected === 'function';
  const onClickButton = async event => {
    try {
      if (usingContext) {
        context.setSelected(index);
      }
      if (onClick && typeof onClick === 'function') {
        setProcessing(true);
        //@ts-ignore
        await onClick(event);
        setProcessing(false);
        return;
      }
    } finally {
      setProcessing(false);
    }
  };
  const properties = {
    ...otherProps,
    type: props.type ? props.type : 'button'
  };
  if (title) properties['data-tippy-content'] = title;
  if (data) {
    Object.keys(data).forEach(entry => {
      properties[`data-${entry}`] = data[entry];
    });
  }
  let cls = `pui-button btn-${variant}`;
  cls += className ? ` ${className}` : '';
  cls += bordered ? ' outline' : '';
  cls += icon ? ' has-icon' : '';
  cls += block ? ' btn--block' : '';
  cls += sizing ? ` btn--${sizing}` : '';
  cls += loading || fetching ? ' btn--loading' : '';
  const clsLoading = `button-label ${loading || fetching ? 'button-label--loading' : ''}`;
  if (usingContext && context.selected === index) cls += ' pui-btn--active';
  if (usingContext) properties['data-index'] = index;
  return _react.default.createElement("button", {
    ref: ref,
    className: cls,
    onClick: onClickButton,
    disabled: loading || fetching || disabled,
    ...properties
  }, icon && _react.default.createElement(_icons.Icon, {
    icon: icon
  }), label || children && _react.default.createElement("div", {
    className: clsLoading
  }, label || children), (loading || fetching) && _react.default.createElement(_spinner.Spinner, {
    type: `on-${variant}`,
    active: true
  }));
});
}});

/**********************************
INTERNAL MODULE: ./button/interface
**********************************/

ims.set('./button/interface', {hash: 694968353, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/***************************************
INTERNAL MODULE: ./conditional-container
***************************************/

ims.set('./conditional-container', {hash: 1749837270, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ConditionalContainer = ConditionalContainer;
/*bundle*/function ConditionalContainer({
  condition,
  options,
  placeholder,
  ternary
}) {
  const evaluatedValue = typeof condition === 'function' ? condition() : condition;
  let Component;
  if (ternary && typeof evaluatedValue === 'boolean') {
    Component = evaluatedValue ? options.true : options.false;
  } else {
    Component = options[evaluatedValue] || placeholder;
  }
  return Component ? Component : null;
}
}});

/***************************************
INTERNAL MODULE: ./hooks/use-media-query
***************************************/

ims.set('./hooks/use-media-query', {hash: 2034606327, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMediaQuery = useMediaQuery;
var _react = require("react");
/*bundle*/function useMediaQuery() {
  const [size, setSize] = (0, _react.useState)('lg');
  const calculateSize = () => {
    const width = window.innerWidth;
    if (width < 576) {
      return 'xs';
    } else if (width >= 576 && width < 768) {
      return 'sm';
    } else if (width >= 768 && width < 992) {
      return 'md';
    } else {
      return 'lg';
    }
  };
  (0, _react.useEffect)(() => {
    const handleResize = () => {
      const newSize = calculateSize();
      setSize(newSize);
    };
    // Set initial size
    handleResize();
    // Set up event listener for resizing
    window.addEventListener('resize', handleResize);
    // Clean up function
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return size;
}
}});

/******************************
INTERNAL MODULE: ./html-wrapper
******************************/

ims.set('./html-wrapper', {hash: 4059971987, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HtmlWrapper = HtmlWrapper;
var _react = require("react");
/*bundle*/function HtmlWrapper({
  className,
  children,
  params = {},
  tag = 'span',
  as = 'span'
}) {
  const Control = as || tag;
  const keys = Object.keys(params);
  keys.forEach(key => {
    const value = params[key];
    children = children.replace(new RegExp(`\\{${key}\\}`, 'g'), value);
  });
  return _react.default.createElement(Control, {
    className: className,
    dangerouslySetInnerHTML: {
      __html: children
    }
  });
}
}});

/**********************
INTERNAL MODULE: ./link
**********************/

ims.set('./link', {hash: 1413814841, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Link = Link;
var _react = require("react");
var _routing = require("@beyond-js/kernel/routing");
/*bundle*/function Link({
  href,
  ...props
}) {
  const isExternal = props.target === '_blank';
  const onClick = event => {
    if (!isExternal) event.preventDefault();
    event.stopPropagation();
    if (props.onClick && typeof props.onClick === 'function') {
      const result = props.onClick(event);
      if (result === false) return;
    }
    !isExternal && _routing.routing.pushState(href);
  };
  const properties = {
    ...props
  };
  ['href', 'onClick'].forEach(prop => delete properties[prop]);
  return _react.default.createElement("a", {
    ...properties,
    href: href,
    onClick: onClick,
    target: props.target
  }, props.children);
}
}});

/**************************************
INTERNAL MODULE: ./responsive-container
**************************************/

ims.set('./responsive-container', {hash: 285431686, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ResponsiveContainer = ResponsiveContainer;
var _react = require("react");
var _useMediaQuery = require("./hooks/use-media-query");
/*bundle*/function ResponsiveContainer(props) {
  const size = (0, _useMediaQuery.useMediaQuery)();
  // Ordered sizes, from smallest to largest.
  const sizes = ['xs', 'sm', 'md', 'lg'];
  // Function to find the first available component for the current or larger screen size.
  const getComponent = currentSize => {
    const currentIndex = sizes.indexOf(currentSize);
    for (let i = currentIndex; i < sizes.length; i++) {
      const component = props[sizes[i]];
      if (component !== undefined && component !== null) {
        return component;
      }
    }
    return null;
  };
  const Component = getComponent(size);
  // Return null if no matching component is found.
  if (!Component) {
    return null;
  }
  // Render the component matching the current or closest screen size.
  return _react.default.createElement(Component, null);
}
}});

/*************************
INTERNAL MODULE: ./spinner
*************************/

ims.set('./spinner', {hash: 3026278285, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Spinner = void 0;
var _react = require("react");
;
const Component = (props, ref) => {
  let {
    color,
    className,
    size,
    type,
    active
  } = props;
  size = size ? size : 'xs';
  const types = ['on-primary', 'on-secondary', 'on-surface', 'on-error', 'primary', 'secondary', 'tertiary'];
  const clsType = types.includes(type) ? type : 'primary';
  const style = {};
  if (color) style.stroke = color;
  className = `${clsType}${className ? ` ${className}` : ''}`;
  let cls = `${className ? `${className} ` : ''}pragmate-element-spinner spinner--${size}`;
  if (active) cls += ' is-active';
  return _react.default.createElement("div", {
    className: cls,
    ref: ref
  }, _react.default.createElement("svg", {
    viewBox: '0 0 100 100'
  }, _react.default.createElement("circle", {
    cx: '50',
    cy: '50',
    r: '30',
    style: style
  })));
};
/*bundle*/const Spinner = exports.Spinner = (0, _react.forwardRef)(Component);
}});

/****************************
INTERNAL MODULE: ./use-ripple
****************************/

ims.set('./use-ripple', {hash: 3800109915, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useRipple = useRipple;
var _react = require("react");
var _ripple = require("pragmate-ui/ripple");
var _tippy = require("tippy.js");
function useRipple(title, ref) {
  ref = ref ?? _react.default.useRef(null);
  _react.default.useEffect(() => {
    const ripple = new _ripple.RippleEffect();
    ripple.addRippleEffect(ref.current);
    if (title) {
      (0, _tippy.default)(ref.current);
    }
  }, [title]);
  return ref;
}
}});

__pkg.exports.descriptor = [{"im":"./button-group/button-group","from":"ButtonGroup","name":"ButtonGroup"},{"im":"./button/button","from":"Button","name":"Button"},{"im":"./button/interface","from":"IButtonProps","name":"IButtonProps"},{"im":"./conditional-container","from":"ConditionalContainer","name":"ConditionalContainer"},{"im":"./hooks/use-media-query","from":"useMediaQuery","name":"useMediaQuery"},{"im":"./html-wrapper","from":"HtmlWrapper","name":"HtmlWrapper"},{"im":"./link","from":"Link","name":"Link"},{"im":"./responsive-container","from":"ResponsiveContainer","name":"ResponsiveContainer"},{"im":"./spinner","from":"Spinner","name":"Spinner"}];

export let ButtonGroup, Button, IButtonProps, ConditionalContainer, useMediaQuery, HtmlWrapper, Link, ResponsiveContainer, Spinner;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'ButtonGroup') && (ButtonGroup = require ? require('./button-group/button-group').ButtonGroup : value);
    (require || prop === 'Button') && (Button = require ? require('./button/button').Button : value);
    (require || prop === 'IButtonProps') && (IButtonProps = require ? require('./button/interface').IButtonProps : value);
    (require || prop === 'ConditionalContainer') && (ConditionalContainer = require ? require('./conditional-container').ConditionalContainer : value);
    (require || prop === 'useMediaQuery') && (useMediaQuery = require ? require('./hooks/use-media-query').useMediaQuery : value);
    (require || prop === 'HtmlWrapper') && (HtmlWrapper = require ? require('./html-wrapper').HtmlWrapper : value);
    (require || prop === 'Link') && (Link = require ? require('./link').Link : value);
    (require || prop === 'ResponsiveContainer') && (ResponsiveContainer = require ? require('./responsive-container').ResponsiveContainer : value);
    (require || prop === 'Spinner') && (Spinner = require ? require('./spinner').Spinner : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=components.browser.mjs.map