open-index/open-npm huggingface dataset:
npm package: @sbc-fe/x.analytics
Description: analytics 
Author: Jack.Chan
Latest version: 1.0.5

# x.analytics.js 统计分析记录



#### Web

```html
<script src="../lib/x.analytics.min.js"></script>

<script>
// console.log(window.xa)
xa.adapter(function(data, query) {
	console.log(data);
	var img = new Image();
	img.src = 'http://test.com/analytics?'+ query;
});

xa('create', 'test-1', 'auto');
xa('send', 'pageview');
</script>
```



#### Vue

```javascript
// main.js
import Vue from 'vue'
import XA from '@sbc-fe/x.analytics'

XA.adapter(function(data, query) {
	console.log(data);
	var img = new Image();
	img.src = 'http://test.com/analytics?'+ query;
});

Vue.prototype.$xa = XA

// component
this.$xa('create', 'test-1', 'auto');
this.$xa('send', 'pageview');
```



#### uni-app

```javascript
// main.js
import XA from '@sbc-fe/x.analytics'

XA.adapter(function(data, query) {
	console.log(data);
	var img = new Image();
	img.src = 'http://test.com/analytics?'+ query;
});


uni.xa = XA;

uni.xa('create', 'test-1', 'auto');
uni.xa('send', 'pageview');
```
npm package: @sbc-fe/x.jslogger
Description: jslogger
Author: Jack.Chan
Latest version: 1.0.3

# x.jslogger.js 前端日志记录



#### Web

```html
<script src="../lib/x.jslogger.js"></script>

<script>
var xconsole = jsLogger;
// console.log(xconsole);

xconsole.adapter = function(data, query) {
	console.log('>>> jsLogger report query -----------');
	console.log(data, '\n', query);
	console.log('\n\n');
    var img = new Image();
    img.src = 'http://test.com/xlog?'+query;
}
// xconsole.config({log: 1});
// xconsole.set({siteCode: 123});

xconsole.log('x1', {'x2': true}, 'x3');
xconsole.error('errorasdfasdf');
</script>
```



#### Vue

```javascript
// main.js
import Vue from 'vue';
import jsLogger from '@sbc-fe/x.jslogger';

// jsLogger.config({log: 1});
// jsLogger.set({siteCode: 123});
jsLogger.adapter = function(data, query) {
	var img = new Image();
	img.src = 'http://test.com/xlog?'+query;
}

Vue.prototype.$console = jsLogger;


// component
// console.log(this.$xconsole);
this.$xconsole.log('x1', {'x2': true}, 'x3');

this.$xconsole.error('errorasdfasdf');
```



#### uni-app

```javascript
// main.js
import jsLogger from '@sbc-fe/x.jslogger';

// jsLogger.config({log: 1});
// jsLogger.set({siteCode: 123});
jsLogger.adapter = function(data, query) {
	url = url && url.indexOf('?') < 0 ? url+'?' : url;
	var img = new Image();
	img.src = 'http://test.com/xlog?'+query;
    // or
    //uni.request(...);
}

uni.$console = jsLogger;

uni.$xconsole.log('x1', {'x2': true}, 'x3');

uni.$xconsole.error('errorasdfasdf');
```
npm package: @sbdesign/core
Description: SB Design System - Complete UI Component Library
Latest version: 1.0.1

# @sbdesign/core

SB Design System'in tüm bileşenlerini tek pakette toplayan ana paket. Tüm paketleri tek komutla yükler.

## Kurulum

```bash
npm install @sbdesign/core
```

Bu komut otomatik olarak şu paketleri yükler:
- `@sbdesign/ui` - UI bileşenleri
- `@sbdesign/icons` - SVG ikon bileşenleri
- `@sbdesign/styles` - Design tokens ve base styles
- `@sbdesign/template-font` - Font ikon paketi

## Kullanım

```typescript
// Tüm bileşenleri import edin
import { Button, Card, Input, Badge, Icon, SvgIcon } from '@sbdesign/core';
import { Plus, User } from '@sbdesign/core';

// Stiller otomatik olarak yüklenir (index.ts'de import edilir)
// Ekstra bir import gerekmez, ama isterseniz:
import '@sbdesign/core';
```

## Alternatif: Paketleri Ayrı Yükleme

Eğer sadece belirli paketleri yüklemek isterseniz:

```bash
npm install @sbdesign/ui @sbdesign/icons @sbdesign/styles @sbdesign/template-font
```

## İçerik

Bu paket aşağıdaki paketleri dependency olarak içerir:
- `@sbdesign/ui` - React UI bileşenleri (Button, Card, Input, vb.)
- `@sbdesign/icons` - SVG ikon bileşenleri (Plus, User, Check, vb.)
- `@sbdesign/styles` - Design tokens, base styles ve utilities
- `@sbdesign/template-font` - Font ikon paketi (sb-template-font)

## Lisans

MIT
npm package: @sbdesign/icons
Description: SVG icon components for SB Design System
Latest version: 0.1.1

# @sbdesign/icons

SVG icon components for SB Design System.

## Installation

```bash
npm install @sbdesign/icons
```

## Usage

```tsx
import { Plus, User, Moon, Sun } from '@sbdesign/icons';

function App() {
  return (
    <div>
      <Plus width={24} height={24} />
      <User width={20} height={20} style={{ color: 'red' }} />
    </div>
  );
}
```

## Available Icons

- Plus
- User
- Image
- Check
- X (Close)
- ChevronLeft
- ChevronRight
- Moon
- Sun

## Props

All icons accept standard SVG props:

```tsx
type IconProps = React.SVGProps<SVGSVGElement>;
```

Common props:
- `width` - Icon width (default: 24)
- `height` - Icon height (default: 24)
- `color` - Icon color (uses currentColor by default)
- `className` - CSS class
- `style` - Inline styles

## Adding New Icons

Create a new `.tsx` file:

```tsx
import * as React from 'react';

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
      <path d="..." stroke="currentColor" />
    </svg>
  );
}
```

Export in `index.ts`:

```ts
export * from './MyIcon';
```

## License

MIT
npm package: @sbdesign/logo-loader
Description: Standalone 3D Logo Loader component for SB Design
Latest version: 0.1.2

# @sbdesign/logo-loader

Standalone 3D `LogoLoader` component for React projects.

## Install

```bash
npm install @sbdesign/logo-loader three
npm install -D @types/three
```

## Usage

```tsx
import { LogoLoader } from "@sbdesign/logo-loader";

export default function Example() {
  return <LogoLoader isFadingOut={false} size="md" color="brand" />;
}
```

## Props

- `isFadingOut: boolean`
- `size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"`
- `color?: "brand" | "white" | "black"`
npm package: @sbdesign/styles
Description: Design tokens and base styles for SB Design System
Latest version: 0.1.1

# @sbdesign/styles

Design tokens and base styles for SB Design System.

## Installation

```bash
npm install @sbdesign/styles
```

## Usage

```tsx
// Import in your root layout or _app
import '@sbdesign/styles';
```

This imports:
- Design tokens (CSS variables)
- CSS reset
- Base styles
- Utility classes

## Design Tokens

All values are defined as CSS variables:

### Colors

```css
--color-bg          /* Background */
--color-fg          /* Foreground (text) */
--color-primary     /* Primary brand color */
--color-secondary   /* Secondary color */
--color-success     /* Success state */
--color-warning     /* Warning state */
--color-error       /* Error state */
```

### Spacing

```css
--gap-1: 4px
--gap-2: 8px
--gap-3: 12px
--gap-4: 16px
--gap-6: 24px
--gap-8: 32px
```

### Typography

```css
--font-sans         /* Sans-serif font stack */
--fs-xs: 12px       /* Font sizes */
--fs-sm: 14px
--fs-md: 16px
--fs-lg: 18px
```

### Border Radius

```css
--radius-sm: 8px
--radius-md: 12px
--radius-lg: 16px
--radius-full: 9999px
```

## Dark Mode

Dark mode is supported via `data-theme` attribute:

```tsx
// Toggle theme
document.documentElement.setAttribute('data-theme', 'dark');
```

## Utility Classes

### Layout

```css
.container      /* Max-width container */
.grid           /* CSS Grid layout */
.row            /* Flex row */
.flex           /* Flexbox */
```

### Spacing

```css
.p-4            /* Padding */
.mt-4           /* Margin top */
.gap-4          /* Gap */
```

### Typography

```css
.text-xs        /* Font size */
.font-bold      /* Font weight */
.text-center    /* Text align */
```

## Customization

Override tokens in your own CSS:

```css
:root {
  --color-primary: #your-color;
  --gap-4: 20px;
}
```

## License

MIT
npm package: @sbdesign/template-font
Description: Font icon package for SB Design System - sb-template-font icon font
Latest version: 0.1.1

# sb-template-font

Font icon package for SB Design System. Contains the `sb-template-font` icon font with all icon classes.

## Installation

```bash
npm install @sbdesign/template-font
```

## Usage

### CSS Import

Import the CSS file in your application:

```css
@import '@sbdesign/template-font';
```

Or in JavaScript/TypeScript:

```javascript
import '@sbdesign/template-font';
```

### HTML Usage

After importing the CSS, you can use the icon classes:

```html
<i class="sb-kullanici-arti"></i>
<i class="sb-kullanici"></i>
<i class="sb-ok-sag"></i>
```

### React Usage

```tsx
function MyComponent() {
  return (
    <div>
      <i className="sb-kullanici-arti" />
      <i className="sb-kullanici" />
      <i className="sb-ok-sag" />
    </div>
  );
}
```

### With Icon Component

You can also use the `Icon` component from `@sbdesign/ui`:

```tsx
import { Icon } from '@sbdesign/ui';
import '@sbdesign/template-font';

function MyComponent() {
  return (
    <div>
      <Icon name="sb-kullanici-arti" size="lg" />
      <Icon name="sb-kullanici" size="md" />
    </div>
  );
}
```

## Available Icons

All icons are prefixed with `sb-`. Some examples:

- `sb-kullanici-arti` - User add icon
- `sb-kullanici` - User icon
- `sb-ok-sag` - Right arrow icon
- `sb-ok-sol` - Left arrow icon
- `sb-bulut` - Cloud icon
- `sb-takvim` - Calendar icon

For a complete list of available icons, see the [SB Design System documentation](https://github.com/sagliktemplate/sagliktemplatedesign).

## License

MIT
npm package: @sbdesign/ui
Description: React component library for SB Design System
Latest version: 0.1.3

# @sbdesign/ui

React component library for SB Design System - modern, accessible, runtime-free components.

## Installation

```bash
npm install @sbdesign/ui
```

## Usage

```tsx
// Import styles (in your root layout)
import '@sbdesign/styles';
import '@sbdesign/ui/styles.css';

// Import components
import { Button, Card, Modal } from '@sbdesign/ui';
import { Plus } from '@sbdesign/icons';

function App() {
  return (
    <Card
      title="Welcome"
      description="Get started with SB Design"
      footer={
        <Button variant="primary">
          <Plus width={16} height={16} />
          Add New
        </Button>
      }
    />
  );
}
```

## Components

### Core
- **Button** - Interactive button with variants and loading states
- **Card** - Content card with image, title, description and footer
- **Avatar** - User profile image with fallback
- **Badge** - Status and label indicators
- **Input** - Form input with label, error and helper text

### Advanced
- **Dropdown** - Accessible dropdown menu
- **Carousel** - Image/content carousel with controls
- **Slider** - Range slider with keyboard support
- **Tabs** - Tabbed interface
- **Modal** - Dialog with focus management

### Utilities
- **Skeleton** - Loading placeholders

## Features

- ✅ Zero runtime dependencies (except React peer)
- ✅ TypeScript support
- ✅ Accessibility (WCAG AA)
- ✅ Dark mode support
- ✅ Tree-shakeable
- ✅ Responsive

## Documentation

Visit the showcase app for live demos and full documentation.

## License

MIT
npm package: @sbenitez73/cordova-ble-zbtprinter
Description: This plugin globally defines the different actions that the printer can have, such as print, obtain ZPL code, print, etc.
Author: Santiago Benitez
Latest version: 1.0.7

#  `@sbenitez73/cordova-ble-zbtprinter`

[![npm version](https://img.shields.io/npm/v/@sbenitez73/cordova-ble-zbtprinter?label=VERSION&style=plastic)](https://www.npmjs.com/package/@sbenitez73/cordova-ble-zbtprinter)

This plugin is built so that it can be used with Zebra thermal printers, through bluetooth, we can print images and whatever we want with Zebra's ZPL or CPCL programming language.


## Installation

`npm i @sbenitez73/cordova-ble-zbtprinter`
## Usage

Import printer instance from `@sbenitez73/cordova-ble-zbtprinter`:

```javascript
import ZbtPrinter from '@sbenitez73/cordova-ble-zbtprinter';
```

You can send data in ZPL, CPCL Zebra Programing Language:

```js
let printText = "^XA^FO20,20^A0N,25,25^FDThis is a ZPL test.^FS^XZ";
ZbtPrinter.print( MACAddress, printText, 
    (success) => {
        alert("Printed successfully");
    }, ( error ) => {
        alert( error );
    }
);
```

Converts the image and returns it with the position indicated in the properties (only available with CPCL code):

```js
ZbtPrinter.convertImage(imageRoute, position,
    (printerName) => { 
        alert("Printer name: " + printerName); 
    }, (fail) => { 
        alert(fail); 
    }
);
```

Discover nearby bluetooth Zebra printers:

```js
ZbtPrinter.discoverPrinters(
    (MACAddress) => { 
        alert("discovered a new printer: " + MACAddress); 
    }, (error) => { 
        alert(error); 
    }
);
```

You can get a status response from a connected Zebra printer using:
```js
ZbtPrinter.getStatus(address,
    (success) => {
        alert("Zbtprinter status: " + success);
    },(error) => {
        alert("Zbtprinter error: " + failerror);
    }
);
```

Retrieve the currently connected printer name:

```js
ZbtPrinter.getPrinterName(MACAddress,
    (printerName) => { 
        alert("Printer name: " + printerName); 
    }, (fail) => { 
        alert(fail); 
    }
);
```

## ZPL equivalent code from Base64
Get ZPL equivalent code from the base64 Image string (return only ZPL code):

```js

let base64Image: string = base64String;
let addHeaderFooter: boolean = false;    	//Want to add header/footer ZPL code or not
let blacknessPercentage: number = 50;		//Blackness Percentage

ZbtPrinter.getZPLfromImage(base64Image, addHeaderFooter, blacknessPercentage,
    (zplCode) => {
        alert("ZPL Code : " + zplCode);
    }, (error) => {
	    alert(error);
    }
);
```

## ZPL - Zebra Programming Language
For more information about ZPL please see the  [PDF Official Manual](https://support.zebra.com/cpws/docs/zpl/zpl_manual.pdf)

## CPCL - Zebra Programming Language
For more information about CPCL please see the  [PDF Official Manual](https://support.zebra.com/cpws/docs/comtec/PROMAN-CPCL_RevY.pdf)
npm package: @sbercoin/sbercoin-opcodes
Description: Sbercoin opcodes map
Author: Sbercoin
Latest version: 1.0.0

# sbercoin-opcodes-js
The SBER opcodes map

## Installation
``` bash
npm install sbercoin-opcodes
```

## Setup
### Node.js
``` javascript
var ops = require('sbercoin-opcodes')
```