@progress/kendo-react-barcodes 10.2.0-develop.6 → 10.2.0-develop.8

package/dist/cdn/js/kendo-react-barcodes.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-charts"),require("@progress/kendo-drawing")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-charts","@progress/kendo-drawing"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactBarcodes={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoCharts,e.KendoDrawing)}(this,(function(e,t,r,s,n,o){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=a(t);const c=(e,t)=>{if(!t.type)return[];switch(t.type){case"add":return[...e,t.payload];case"remove":return e.filter((e=>e!==t.payload));default:return e}},d=e=>"object"==typeof e,l=(e,t)=>{if(Object.keys(e).length!==Object.keys(t).length)return!0;for(const r in e)if(e.hasOwnProperty(r)){const s=e[r],n=t[r];if(d(s)&&d(n)?l(s,n):s!==n)return!0}return!1},p=(e,t)=>{if(!e||!t||(e=[].concat(e),t=[].concat(t),e.length!==t.length))return!0;for(let r=0;r<e.length;r++)if(l(e[r],t[r]))return!0;return!1},h=i.createContext(null);h.displayName="BarcodeContext";const u={name:"@progress/kendo-react-barcodes",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},g=class extends i.Component{constructor(e){super(e),this.barcodeInstance=null,this.surface=null,this._element=null,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{null!==this.barcodeInstance&&(this.barcodeInstance.redraw(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!s.validatePackage(u,{component:"Barcode"}),this.observersStore=(e=>{let t,r,n=[];const o=o=>{t=e(t,o),s.canUseDOM&&(window.clearTimeout(r),r=window.setTimeout((()=>n.forEach((e=>e()))),16.666666666666668))};return o({}),{getState:()=>t,dispatch:o,subscribe:e=>(n.push(e),()=>n=n.filter((t=>t!==e)))}})(c),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.instantiateCoreBarcode(),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{children:t,deriveOptionsFromParent:r,getTarget:s,barcodeConstructor:n,className:o,renderAs:a,...i}=this.props,{children:c,deriveOptionsFromParent:d,getTarget:l,barcodeConstructor:h,className:u,renderAs:g,...b}=e;if(null!==this.barcodeInstance){const e=p(b,i);(a||"svg")!==(g||"svg")?(null!==this.barcodeInstance&&(this.barcodeInstance.destroy(),this.barcodeInstance=null),this.instantiateCoreBarcode()):e&&this.refresh(),this.trigger("render",{sender:this})}}componentWillUnmount(){null!==this.barcodeInstance&&(this.barcodeInstance.destroy(),this.barcodeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:r}=this.props;return i.createElement(h.Provider,{value:this.contextValue},i.createElement("div",{style:e,ref:e=>{this._element=e},className:t},r,this.showLicenseWatermark&&i.createElement(s.WatermarkOverlay,null)))}instantiateCoreBarcode(){const{barcodeConstructor:e}=this.props,t=this.getBarcodeOptions();this.barcodeInstance=new e(this.element,t,(e=>{if("production"!==process.env.NODE_ENV)throw e;console.warn(e)}))}refresh(){if(null!==this.barcodeInstance){const e=this.getBarcodeOptions();this.barcodeInstance.setOptions(e)}}getBarcodeOptions(){const{renderAs:e,deriveOptionsFromParent:t}=this.props;let r={renderAs:e};return t&&(r=t(r)),r}trigger(e,t){const r=this.observersStore.getState();for(let s=0;s<r.length;s++)r[s].trigger(e,t)}};g.propTypes={dir:r.string,renderAs:r.oneOf(["svg","canvas"])},g.defaultProps={renderAs:"svg"};let b=g;class m extends i.Component{constructor(){super(...arguments),this._baseBarcode=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>Object.assign({},e,{background:this.props.background,border:this.props.border,checksum:this.props.checksum,color:this.props.color,height:this.props.height,padding:this.props.padding,text:this.props.text,type:this.props.type,value:this.props.value,width:this.props.width})}get barcodeInstance(){return null!==this._baseBarcode?this._baseBarcode.barcodeInstance:null}get surface(){return null!==this._baseBarcode?this._baseBarcode.surface:null}get element(){return null!==this._baseBarcode?this._baseBarcode.element:null}render(){const{children:e,className:t,...r}=this.props;return i.createElement(b,{...r,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseBarcode=e},barcodeConstructor:n.Barcode,getTarget:this.getTarget,className:s.classNames("k-barcode",t)},e)}exportImage(e={}){return o.exportImage(this.exportVisual(),e)}exportSVG(e={}){return o.exportSVG(this.exportVisual(),e)}exportVisual(e){return null!==this.barcodeInstance?this.barcodeInstance.exportVisual(e):new o.Group}}class f extends i.Component{constructor(){super(...arguments),this._baseBarcode=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>Object.assign({},e,{background:this.props.background||"#fff",border:this.props.border,color:this.props.color||"#000",encoding:this.props.encoding,errorCorrection:this.props.errorCorrection||"L",overlay:this.props.overlay||{},padding:this.props.padding,renderAs:this.props.renderAs,size:this.props.size,value:this.props.value})}get barcodeInstance(){return null!==this._baseBarcode?this._baseBarcode.barcodeInstance:null}get surface(){return null!==this._baseBarcode?this._baseBarcode.surface:null}get element(){return null!==this._baseBarcode?this._baseBarcode.element:null}render(){const{children:e,className:t,...r}=this.props;return i.createElement(b,{...r,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseBarcode=e},barcodeConstructor:n.QRCode,getTarget:this.getTarget,className:s.classNames("k-qrcode",t)},e)}exportImage(e={}){return o.exportImage(this.exportVisual(),e)}exportSVG(e={}){return o.exportSVG(this.exportVisual(),e)}exportVisual(e){return null!==this.barcodeInstance?this.barcodeInstance.exportVisual(e):new o.Group}}e.Barcode=m,e.QRCode=f}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-charts"),require("@progress/kendo-drawing")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-charts","@progress/kendo-drawing"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactBarcodes={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoCharts,e.KendoDrawing)}(this,(function(e,t,r,s,n,o){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=a(t);const c=(e,t)=>{if(!t.type)return[];switch(t.type){case"add":return[...e,t.payload];case"remove":return e.filter((e=>e!==t.payload));default:return e}},d=e=>"object"==typeof e,l=(e,t)=>{if(Object.keys(e).length!==Object.keys(t).length)return!0;for(const r in e)if(e.hasOwnProperty(r)){const s=e[r],n=t[r];if(d(s)&&d(n)?l(s,n):s!==n)return!0}return!1},p=(e,t)=>{if(!e||!t||(e=[].concat(e),t=[].concat(t),e.length!==t.length))return!0;for(let r=0;r<e.length;r++)if(l(e[r],t[r]))return!0;return!1},h=i.createContext(null);h.displayName="BarcodeContext";const u={name:"@progress/kendo-react-barcodes",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.8",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},g=class extends i.Component{constructor(e){super(e),this.barcodeInstance=null,this.surface=null,this._element=null,this.observersStore={},this.showLicenseWatermark=!1,this.onWindowResize=()=>{null!==this.barcodeInstance&&(this.barcodeInstance.redraw(),this.trigger("render",{sender:this}))},this.showLicenseWatermark=!s.validatePackage(u,{component:"Barcode"}),this.observersStore=(e=>{let t,r,n=[];const o=o=>{t=e(t,o),s.canUseDOM&&(window.clearTimeout(r),r=window.setTimeout((()=>n.forEach((e=>e()))),16.666666666666668))};return o({}),{getState:()=>t,dispatch:o,subscribe:e=>(n.push(e),()=>n=n.filter((t=>t!==e)))}})(c),this.contextValue={observersStore:this.observersStore}}get element(){return this._element}componentDidMount(){this.instantiateCoreBarcode(),window.addEventListener("resize",this.onWindowResize),this.trigger("render",{sender:this})}componentDidUpdate(e){const{children:t,deriveOptionsFromParent:r,getTarget:s,barcodeConstructor:n,className:o,renderAs:a,...i}=this.props,{children:c,deriveOptionsFromParent:d,getTarget:l,barcodeConstructor:h,className:u,renderAs:g,...b}=e;if(null!==this.barcodeInstance){const e=p(b,i);(a||"svg")!==(g||"svg")?(null!==this.barcodeInstance&&(this.barcodeInstance.destroy(),this.barcodeInstance=null),this.instantiateCoreBarcode()):e&&this.refresh(),this.trigger("render",{sender:this})}}componentWillUnmount(){null!==this.barcodeInstance&&(this.barcodeInstance.destroy(),this.barcodeInstance=null),window.removeEventListener("resize",this.onWindowResize)}render(){const{style:e={},className:t,children:r}=this.props;return i.createElement(h.Provider,{value:this.contextValue},i.createElement("div",{style:e,ref:e=>{this._element=e},className:t},r,this.showLicenseWatermark&&i.createElement(s.WatermarkOverlay,null)))}instantiateCoreBarcode(){const{barcodeConstructor:e}=this.props,t=this.getBarcodeOptions();this.barcodeInstance=new e(this.element,t,(e=>{if("production"!==process.env.NODE_ENV)throw e;console.warn(e)}))}refresh(){if(null!==this.barcodeInstance){const e=this.getBarcodeOptions();this.barcodeInstance.setOptions(e)}}getBarcodeOptions(){const{renderAs:e,deriveOptionsFromParent:t}=this.props;let r={renderAs:e};return t&&(r=t(r)),r}trigger(e,t){const r=this.observersStore.getState();for(let s=0;s<r.length;s++)r[s].trigger(e,t)}};g.propTypes={dir:r.string,renderAs:r.oneOf(["svg","canvas"])},g.defaultProps={renderAs:"svg"};let b=g;class m extends i.Component{constructor(){super(...arguments),this._baseBarcode=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>Object.assign({},e,{background:this.props.background,border:this.props.border,checksum:this.props.checksum,color:this.props.color,height:this.props.height,padding:this.props.padding,text:this.props.text,type:this.props.type,value:this.props.value,width:this.props.width})}get barcodeInstance(){return null!==this._baseBarcode?this._baseBarcode.barcodeInstance:null}get surface(){return null!==this._baseBarcode?this._baseBarcode.surface:null}get element(){return null!==this._baseBarcode?this._baseBarcode.element:null}render(){const{children:e,className:t,...r}=this.props;return i.createElement(b,{...r,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseBarcode=e},barcodeConstructor:n.Barcode,getTarget:this.getTarget,className:s.classNames("k-barcode",t)},e)}exportImage(e={}){return o.exportImage(this.exportVisual(),e)}exportSVG(e={}){return o.exportSVG(this.exportVisual(),e)}exportVisual(e){return null!==this.barcodeInstance?this.barcodeInstance.exportVisual(e):new o.Group}}class f extends i.Component{constructor(){super(...arguments),this._baseBarcode=null,this.getTarget=()=>this,this.deriveOptionsFromParent=e=>Object.assign({},e,{background:this.props.background||"#fff",border:this.props.border,color:this.props.color||"#000",encoding:this.props.encoding,errorCorrection:this.props.errorCorrection||"L",overlay:this.props.overlay||{},padding:this.props.padding,renderAs:this.props.renderAs,size:this.props.size,value:this.props.value})}get barcodeInstance(){return null!==this._baseBarcode?this._baseBarcode.barcodeInstance:null}get surface(){return null!==this._baseBarcode?this._baseBarcode.surface:null}get element(){return null!==this._baseBarcode?this._baseBarcode.element:null}render(){const{children:e,className:t,...r}=this.props;return i.createElement(b,{...r,deriveOptionsFromParent:this.deriveOptionsFromParent,ref:e=>{this._baseBarcode=e},barcodeConstructor:n.QRCode,getTarget:this.getTarget,className:s.classNames("k-qrcode",t)},e)}exportImage(e={}){return o.exportImage(this.exportVisual(),e)}exportSVG(e={}){return o.exportSVG(this.exportVisual(),e)}exportVisual(e){return null!==this.barcodeInstance?this.barcodeInstance.exportVisual(e):new o.Group}}e.Barcode=m,e.QRCode=f}));

package/index.d.mts

@@ -65,54 +65,77 @@ export declare interface BarcodeProps extends BaseBarcodeProps {
      * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "white"
+     * @example
+     * <Barcode background="#ffffff" />
      */
     background?: string;
     /**
-     * The border of the Barcode.
+     * The border of the Barcode. Accepts an object implementing the `Border` interface.
+     *
+     * @example
+     * <Barcode border={{ color: "black", width: 2 }} />
      */
     border?: Border;
     /**
      * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
      *
      * @default false
+     * @example
+     * <Barcode checksum={true} />
      */
     checksum?: boolean;
     /**
      * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "black"
+     * @example
+     * <Barcode color="#000000" />
      */
     color?: string;
     /**
      * The height of the Barcode in pixels.
-     *
      * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * <Barcode height={100} />
      */
     height?: number;
     /**
-     * The padding of the Barcode. A numeric value sets all paddings.
+     * The padding of the Barcode. Accepts a numeric value or an object implementing the `Padding` interface.
      *
      * @default 0
+     * @example
+     * <Barcode padding={{ top: 10, bottom: 10, left: 5, right: 5 }} />
      */
     padding?: Padding | number;
     /**
-     * The Barcode text label configuration.
+     * The Barcode text label configuration. Accepts an object implementing the `BarcodeText` interface.
+     *
+     * @example
+     * <Barcode text={{ visible: true, position: "bottom", color: "black" }} />
      */
     text?: BarcodeText;
     /**
-     * The symbology (encoding) the Barcode will use.
+     * The symbology (encoding) the Barcode will use. Accepts a value of type `BarcodeType` or a custom string.
      *
      * @default "Code39"
+     * @example
+     * <Barcode type="Code128" />
      */
     type: BarcodeType | string;
     /**
-     * The value of the Barcode.
+     * The value of the Barcode. Accepts a string or a number.
+     *
+     * @example
+     * <Barcode value="123456789" />
      */
     value: number | string;
     /**
      * The width of the Barcode in pixels.
-     *
      * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * <Barcode width={200} />
      */
     width?: number;
 }
@@ -164,10 +187,16 @@ declare interface BaseBarcodeProps {
     children?: React.ReactNode;
     /**
      * The styles that are applied to the component.
+     *
+     * @example
+     * <Barcode style={{ backgroundColor: "lightgray" }} />
      */
     style?: React.CSSProperties;
     /**
      * Sets additional CSS classes to the component.
+     *
+     * @example
+     * <Barcode className="custom-barcode-class" />
      */
     className?: string;
     /**
@@ -176,6 +205,9 @@ declare interface BaseBarcodeProps {
      * The supported values are:
      * - `"svg"`&mdash;If available, renders the component as an inline `svg` element.
      * - `"canvas"`&mdash;If available, renders the component as a `canvas` element.
+     *
+     * @example
+     * <Barcode renderAs="svg" />
      */
     renderAs?: RenderMode;
 }
@@ -342,16 +374,23 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "white"
+     * @example
+     * <QRCode background="#ffffff" />
      */
     background?: string;
     /**
-     * The border of the QR Code.
+     * The border of the QR Code. Accepts an object implementing the `Border` interface.
+     *
+     * @example
+     * <QRCode border={{ color: "black", width: 2 }} />
      */
     border?: Border;
     /**
      * The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "black"
+     * @example
+     * <QRCode color="#000000" />
      */
     color?: string;
     /**
@@ -364,6 +403,8 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * * `"UTF_8"`&mdash;Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
      *
      * @default "ISO_8859_1"
+     * @example
+     * <QRCode encoding="UTF_8" />
      */
     encoding?: QRCodeEncoding;
     /**
@@ -376,19 +417,26 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * * `"H"`&mdash;Approximately 30% of the codewords can be restored.
      *
      * @default "L"
+     * @example
+     * <QRCode errorCorrection="H" />
      */
     errorCorrection?: QRCodeErrorCorrection;
     /**
-     * An optional image overlay that will placed over the QR Code.
+     * An optional image overlay that will be placed over the QR Code.
      *
      * > **Note** Always test if the code reads correctly with the applied overlay.
      * > Depending on the length of the value and the size of the overlay, you might need to raise the `errorCorrection` level to `"M"` or `"H"`.
+     *
+     * @example
+     * <QRCode overlay={{ imageUrl: "https://example.com/logo.png", size: 50 }} />
      */
     overlay?: QRCodeOverlay;
     /**
      * The padding of the QR Code. A numeric value sets all paddings.
      *
      * @default 0
+     * @example
+     * <QRCode padding={10} />
      */
     padding?: number;
     /**
@@ -398,10 +446,15 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * If the element has width or height of zero, a default value of 200 pixels will be used.
      *
      * @default "200px"
+     * @example
+     * <QRCode size={300} />
      */
     size?: number | string;
     /**
-     * The value of the QR Code.
+     * The value of the QR Code. Accepts a string or a number.
+     *
+     * @example
+     * <QRCode value="https://example.com" />
      */
     value: number | string;
 }

package/index.d.ts

@@ -65,54 +65,77 @@ export declare interface BarcodeProps extends BaseBarcodeProps {
      * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "white"
+     * @example
+     * <Barcode background="#ffffff" />
      */
     background?: string;
     /**
-     * The border of the Barcode.
+     * The border of the Barcode. Accepts an object implementing the `Border` interface.
+     *
+     * @example
+     * <Barcode border={{ color: "black", width: 2 }} />
      */
     border?: Border;
     /**
      * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
      *
      * @default false
+     * @example
+     * <Barcode checksum={true} />
      */
     checksum?: boolean;
     /**
      * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "black"
+     * @example
+     * <Barcode color="#000000" />
      */
     color?: string;
     /**
      * The height of the Barcode in pixels.
-     *
      * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * <Barcode height={100} />
      */
     height?: number;
     /**
-     * The padding of the Barcode. A numeric value sets all paddings.
+     * The padding of the Barcode. Accepts a numeric value or an object implementing the `Padding` interface.
      *
      * @default 0
+     * @example
+     * <Barcode padding={{ top: 10, bottom: 10, left: 5, right: 5 }} />
      */
     padding?: Padding | number;
     /**
-     * The Barcode text label configuration.
+     * The Barcode text label configuration. Accepts an object implementing the `BarcodeText` interface.
+     *
+     * @example
+     * <Barcode text={{ visible: true, position: "bottom", color: "black" }} />
      */
     text?: BarcodeText;
     /**
-     * The symbology (encoding) the Barcode will use.
+     * The symbology (encoding) the Barcode will use. Accepts a value of type `BarcodeType` or a custom string.
      *
      * @default "Code39"
+     * @example
+     * <Barcode type="Code128" />
      */
     type: BarcodeType | string;
     /**
-     * The value of the Barcode.
+     * The value of the Barcode. Accepts a string or a number.
+     *
+     * @example
+     * <Barcode value="123456789" />
      */
     value: number | string;
     /**
      * The width of the Barcode in pixels.
-     *
      * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * <Barcode width={200} />
      */
     width?: number;
 }
@@ -164,10 +187,16 @@ declare interface BaseBarcodeProps {
     children?: React.ReactNode;
     /**
      * The styles that are applied to the component.
+     *
+     * @example
+     * <Barcode style={{ backgroundColor: "lightgray" }} />
      */
     style?: React.CSSProperties;
     /**
      * Sets additional CSS classes to the component.
+     *
+     * @example
+     * <Barcode className="custom-barcode-class" />
      */
     className?: string;
     /**
@@ -176,6 +205,9 @@ declare interface BaseBarcodeProps {
      * The supported values are:
      * - `"svg"`&mdash;If available, renders the component as an inline `svg` element.
      * - `"canvas"`&mdash;If available, renders the component as a `canvas` element.
+     *
+     * @example
+     * <Barcode renderAs="svg" />
      */
     renderAs?: RenderMode;
 }
@@ -342,16 +374,23 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "white"
+     * @example
+     * <QRCode background="#ffffff" />
      */
     background?: string;
     /**
-     * The border of the QR Code.
+     * The border of the QR Code. Accepts an object implementing the `Border` interface.
+     *
+     * @example
+     * <QRCode border={{ color: "black", width: 2 }} />
      */
     border?: Border;
     /**
      * The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
      *
      * @default "black"
+     * @example
+     * <QRCode color="#000000" />
      */
     color?: string;
     /**
@@ -364,6 +403,8 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * * `"UTF_8"`&mdash;Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
      *
      * @default "ISO_8859_1"
+     * @example
+     * <QRCode encoding="UTF_8" />
      */
     encoding?: QRCodeEncoding;
     /**
@@ -376,19 +417,26 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * * `"H"`&mdash;Approximately 30% of the codewords can be restored.
      *
      * @default "L"
+     * @example
+     * <QRCode errorCorrection="H" />
      */
     errorCorrection?: QRCodeErrorCorrection;
     /**
-     * An optional image overlay that will placed over the QR Code.
+     * An optional image overlay that will be placed over the QR Code.
      *
      * > **Note** Always test if the code reads correctly with the applied overlay.
      * > Depending on the length of the value and the size of the overlay, you might need to raise the `errorCorrection` level to `"M"` or `"H"`.
+     *
+     * @example
+     * <QRCode overlay={{ imageUrl: "https://example.com/logo.png", size: 50 }} />
      */
     overlay?: QRCodeOverlay;
     /**
      * The padding of the QR Code. A numeric value sets all paddings.
      *
      * @default 0
+     * @example
+     * <QRCode padding={10} />
      */
     padding?: number;
     /**
@@ -398,10 +446,15 @@ export declare interface QRCodeProps extends BaseBarcodeProps {
      * If the element has width or height of zero, a default value of 200 pixels will be used.
      *
      * @default "200px"
+     * @example
+     * <QRCode size={300} />
      */
     size?: number | string;
     /**
-     * The value of the QR Code.
+     * The value of the QR Code. Accepts a string or a number.
+     *
+     * @example
+     * <QRCode value="https://example.com" />
      */
     value: number | string;
 }

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-barcodes",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1744622096,version:"10.2.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-barcodes",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1744799818,version:"10.2.0-develop.8",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1744622096,
-  version: "10.2.0-develop.6",
+  publishDate: 1744799818,
+  version: "10.2.0-develop.8",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-barcodes",
-  "version": "10.2.0-develop.6",
+  "version": "10.2.0-develop.8",
   "description": "React Barcodes provide a set of React components to build beautiful and customizable barcodes. KendoReact Barcodes package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,8 +28,8 @@
     "@progress/kendo-charts": "2.7.1",
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "10.2.0-develop.6",
-    "@progress/kendo-react-intl": "10.2.0-develop.6",
+    "@progress/kendo-react-common": "10.2.0-develop.8",
+    "@progress/kendo-react-intl": "10.2.0-develop.8",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -56,7 +56,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1744622096,
+      "publishDate": 1744799818,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },