chore(webchat): remove legacy bundled web assets
parent
b3e466ccb6
commit
3ed33c5856
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,345 +0,0 @@
|
|||
declare type CSSColor =
|
||||
| 'aliceblue'
|
||||
| 'antiquewhite'
|
||||
| 'aqua'
|
||||
| 'aquamarine'
|
||||
| 'azure'
|
||||
| 'beige'
|
||||
| 'bisque'
|
||||
| 'black'
|
||||
| 'blanchedalmond'
|
||||
| 'blue'
|
||||
| 'blueviolet'
|
||||
| 'brown'
|
||||
| 'burlywood'
|
||||
| 'cadetblue'
|
||||
| 'chartreuse'
|
||||
| 'chocolate'
|
||||
| 'coral'
|
||||
| 'cornflowerblue'
|
||||
| 'cornsilk'
|
||||
| 'crimson'
|
||||
| 'cyan'
|
||||
| 'darkblue'
|
||||
| 'darkcyan'
|
||||
| 'darkgoldenrod'
|
||||
| 'darkgray'
|
||||
| 'darkgreen'
|
||||
| 'darkgrey'
|
||||
| 'darkkhaki'
|
||||
| 'darkmagenta'
|
||||
| 'darkolivegreen'
|
||||
| 'darkorange'
|
||||
| 'darkorchid'
|
||||
| 'darkred'
|
||||
| 'darksalmon'
|
||||
| 'darkseagreen'
|
||||
| 'darkslateblue'
|
||||
| 'darkslategray'
|
||||
| 'darkslategrey'
|
||||
| 'darkturquoise'
|
||||
| 'darkviolet'
|
||||
| 'deeppink'
|
||||
| 'deepskyblue'
|
||||
| 'dimgray'
|
||||
| 'dimgrey'
|
||||
| 'dodgerblue'
|
||||
| 'firebrick'
|
||||
| 'floralwhite'
|
||||
| 'forestgreen'
|
||||
| 'fuchsia'
|
||||
| 'gainsboro'
|
||||
| 'ghostwhite'
|
||||
| 'gold'
|
||||
| 'goldenrod'
|
||||
| 'gray'
|
||||
| 'green'
|
||||
| 'greenyellow'
|
||||
| 'grey'
|
||||
| 'honeydew'
|
||||
| 'hotpink'
|
||||
| 'indianred'
|
||||
| 'indigo'
|
||||
| 'ivory'
|
||||
| 'khaki'
|
||||
| 'lavender'
|
||||
| 'lavenderblush'
|
||||
| 'lawngreen'
|
||||
| 'lemonchiffon'
|
||||
| 'lightblue'
|
||||
| 'lightcoral'
|
||||
| 'lightcyan'
|
||||
| 'lightgoldenrodyellow'
|
||||
| 'lightgray'
|
||||
| 'lightgreen'
|
||||
| 'lightgrey'
|
||||
| 'lightpink'
|
||||
| 'lightsalmon'
|
||||
| 'lightseagreen'
|
||||
| 'lightskyblue'
|
||||
| 'lightslategray'
|
||||
| 'lightslategrey'
|
||||
| 'lightsteelblue'
|
||||
| 'lightyellow'
|
||||
| 'lime'
|
||||
| 'limegreen'
|
||||
| 'linen'
|
||||
| 'magenta'
|
||||
| 'maroon'
|
||||
| 'mediumaquamarine'
|
||||
| 'mediumblue'
|
||||
| 'mediumorchid'
|
||||
| 'mediumpurple'
|
||||
| 'mediumseagreen'
|
||||
| 'mediumslateblue'
|
||||
| 'mediumspringgreen'
|
||||
| 'mediumturquoise'
|
||||
| 'mediumvioletred'
|
||||
| 'midnightblue'
|
||||
| 'mintcream'
|
||||
| 'mistyrose'
|
||||
| 'moccasin'
|
||||
| 'navajowhite'
|
||||
| 'navy'
|
||||
| 'oldlace'
|
||||
| 'olive'
|
||||
| 'olivedrab'
|
||||
| 'orange'
|
||||
| 'orangered'
|
||||
| 'orchid'
|
||||
| 'palegoldenrod'
|
||||
| 'palegreen'
|
||||
| 'paleturquoise'
|
||||
| 'palevioletred'
|
||||
| 'papayawhip'
|
||||
| 'peachpuff'
|
||||
| 'peru'
|
||||
| 'pink'
|
||||
| 'plum'
|
||||
| 'powderblue'
|
||||
| 'purple'
|
||||
| 'rebeccapurple'
|
||||
| 'red'
|
||||
| 'rosybrown'
|
||||
| 'royalblue'
|
||||
| 'saddlebrown'
|
||||
| 'salmon'
|
||||
| 'sandybrown'
|
||||
| 'seagreen'
|
||||
| 'seashell'
|
||||
| 'sienna'
|
||||
| 'silver'
|
||||
| 'skyblue'
|
||||
| 'slateblue'
|
||||
| 'slategray'
|
||||
| 'slategrey'
|
||||
| 'snow'
|
||||
| 'springgreen'
|
||||
| 'steelblue'
|
||||
| 'tan'
|
||||
| 'teal'
|
||||
| 'thistle'
|
||||
| 'tomato'
|
||||
| 'turquoise'
|
||||
| 'violet'
|
||||
| 'wheat'
|
||||
| 'white'
|
||||
| 'whitesmoke'
|
||||
| 'yellow'
|
||||
| 'yellowgreen';
|
||||
|
||||
declare namespace ansiStyles {
|
||||
interface ColorConvert {
|
||||
/**
|
||||
The RGB color space.
|
||||
|
||||
@param red - (`0`-`255`)
|
||||
@param green - (`0`-`255`)
|
||||
@param blue - (`0`-`255`)
|
||||
*/
|
||||
rgb(red: number, green: number, blue: number): string;
|
||||
|
||||
/**
|
||||
The RGB HEX color space.
|
||||
|
||||
@param hex - A hexadecimal string containing RGB data.
|
||||
*/
|
||||
hex(hex: string): string;
|
||||
|
||||
/**
|
||||
@param keyword - A CSS color name.
|
||||
*/
|
||||
keyword(keyword: CSSColor): string;
|
||||
|
||||
/**
|
||||
The HSL color space.
|
||||
|
||||
@param hue - (`0`-`360`)
|
||||
@param saturation - (`0`-`100`)
|
||||
@param lightness - (`0`-`100`)
|
||||
*/
|
||||
hsl(hue: number, saturation: number, lightness: number): string;
|
||||
|
||||
/**
|
||||
The HSV color space.
|
||||
|
||||
@param hue - (`0`-`360`)
|
||||
@param saturation - (`0`-`100`)
|
||||
@param value - (`0`-`100`)
|
||||
*/
|
||||
hsv(hue: number, saturation: number, value: number): string;
|
||||
|
||||
/**
|
||||
The HSV color space.
|
||||
|
||||
@param hue - (`0`-`360`)
|
||||
@param whiteness - (`0`-`100`)
|
||||
@param blackness - (`0`-`100`)
|
||||
*/
|
||||
hwb(hue: number, whiteness: number, blackness: number): string;
|
||||
|
||||
/**
|
||||
Use a [4-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4-bit) to set text color.
|
||||
*/
|
||||
ansi(ansi: number): string;
|
||||
|
||||
/**
|
||||
Use an [8-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) to set text color.
|
||||
*/
|
||||
ansi256(ansi: number): string;
|
||||
}
|
||||
|
||||
interface CSPair {
|
||||
/**
|
||||
The ANSI terminal control sequence for starting this style.
|
||||
*/
|
||||
readonly open: string;
|
||||
|
||||
/**
|
||||
The ANSI terminal control sequence for ending this style.
|
||||
*/
|
||||
readonly close: string;
|
||||
}
|
||||
|
||||
interface ColorBase {
|
||||
readonly ansi: ColorConvert;
|
||||
readonly ansi256: ColorConvert;
|
||||
readonly ansi16m: ColorConvert;
|
||||
|
||||
/**
|
||||
The ANSI terminal control sequence for ending this color.
|
||||
*/
|
||||
readonly close: string;
|
||||
}
|
||||
|
||||
interface Modifier {
|
||||
/**
|
||||
Resets the current color chain.
|
||||
*/
|
||||
readonly reset: CSPair;
|
||||
|
||||
/**
|
||||
Make text bold.
|
||||
*/
|
||||
readonly bold: CSPair;
|
||||
|
||||
/**
|
||||
Emitting only a small amount of light.
|
||||
*/
|
||||
readonly dim: CSPair;
|
||||
|
||||
/**
|
||||
Make text italic. (Not widely supported)
|
||||
*/
|
||||
readonly italic: CSPair;
|
||||
|
||||
/**
|
||||
Make text underline. (Not widely supported)
|
||||
*/
|
||||
readonly underline: CSPair;
|
||||
|
||||
/**
|
||||
Inverse background and foreground colors.
|
||||
*/
|
||||
readonly inverse: CSPair;
|
||||
|
||||
/**
|
||||
Prints the text, but makes it invisible.
|
||||
*/
|
||||
readonly hidden: CSPair;
|
||||
|
||||
/**
|
||||
Puts a horizontal line through the center of the text. (Not widely supported)
|
||||
*/
|
||||
readonly strikethrough: CSPair;
|
||||
}
|
||||
|
||||
interface ForegroundColor {
|
||||
readonly black: CSPair;
|
||||
readonly red: CSPair;
|
||||
readonly green: CSPair;
|
||||
readonly yellow: CSPair;
|
||||
readonly blue: CSPair;
|
||||
readonly cyan: CSPair;
|
||||
readonly magenta: CSPair;
|
||||
readonly white: CSPair;
|
||||
|
||||
/**
|
||||
Alias for `blackBright`.
|
||||
*/
|
||||
readonly gray: CSPair;
|
||||
|
||||
/**
|
||||
Alias for `blackBright`.
|
||||
*/
|
||||
readonly grey: CSPair;
|
||||
|
||||
readonly blackBright: CSPair;
|
||||
readonly redBright: CSPair;
|
||||
readonly greenBright: CSPair;
|
||||
readonly yellowBright: CSPair;
|
||||
readonly blueBright: CSPair;
|
||||
readonly cyanBright: CSPair;
|
||||
readonly magentaBright: CSPair;
|
||||
readonly whiteBright: CSPair;
|
||||
}
|
||||
|
||||
interface BackgroundColor {
|
||||
readonly bgBlack: CSPair;
|
||||
readonly bgRed: CSPair;
|
||||
readonly bgGreen: CSPair;
|
||||
readonly bgYellow: CSPair;
|
||||
readonly bgBlue: CSPair;
|
||||
readonly bgCyan: CSPair;
|
||||
readonly bgMagenta: CSPair;
|
||||
readonly bgWhite: CSPair;
|
||||
|
||||
/**
|
||||
Alias for `bgBlackBright`.
|
||||
*/
|
||||
readonly bgGray: CSPair;
|
||||
|
||||
/**
|
||||
Alias for `bgBlackBright`.
|
||||
*/
|
||||
readonly bgGrey: CSPair;
|
||||
|
||||
readonly bgBlackBright: CSPair;
|
||||
readonly bgRedBright: CSPair;
|
||||
readonly bgGreenBright: CSPair;
|
||||
readonly bgYellowBright: CSPair;
|
||||
readonly bgBlueBright: CSPair;
|
||||
readonly bgCyanBright: CSPair;
|
||||
readonly bgMagentaBright: CSPair;
|
||||
readonly bgWhiteBright: CSPair;
|
||||
}
|
||||
}
|
||||
|
||||
declare const ansiStyles: {
|
||||
readonly modifier: ansiStyles.Modifier;
|
||||
readonly color: ansiStyles.ForegroundColor & ansiStyles.ColorBase;
|
||||
readonly bgColor: ansiStyles.BackgroundColor & ansiStyles.ColorBase;
|
||||
readonly codes: ReadonlyMap<number, number>;
|
||||
} & ansiStyles.BackgroundColor & ansiStyles.ForegroundColor & ansiStyles.Modifier;
|
||||
|
||||
export = ansiStyles;
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const wrapAnsi16 = (fn, offset) => (...args) => {
|
||||
const code = fn(...args);
|
||||
return `\u001B[${code + offset}m`;
|
||||
};
|
||||
|
||||
const wrapAnsi256 = (fn, offset) => (...args) => {
|
||||
const code = fn(...args);
|
||||
return `\u001B[${38 + offset};5;${code}m`;
|
||||
};
|
||||
|
||||
const wrapAnsi16m = (fn, offset) => (...args) => {
|
||||
const rgb = fn(...args);
|
||||
return `\u001B[${38 + offset};2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
|
||||
};
|
||||
|
||||
const ansi2ansi = n => n;
|
||||
const rgb2rgb = (r, g, b) => [r, g, b];
|
||||
|
||||
const setLazyProperty = (object, property, get) => {
|
||||
Object.defineProperty(object, property, {
|
||||
get: () => {
|
||||
const value = get();
|
||||
|
||||
Object.defineProperty(object, property, {
|
||||
value,
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
|
||||
return value;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
};
|
||||
|
||||
/** @type {typeof import('color-convert')} */
|
||||
let colorConvert;
|
||||
const makeDynamicStyles = (wrap, targetSpace, identity, isBackground) => {
|
||||
if (colorConvert === undefined) {
|
||||
colorConvert = require('color-convert');
|
||||
}
|
||||
|
||||
const offset = isBackground ? 10 : 0;
|
||||
const styles = {};
|
||||
|
||||
for (const [sourceSpace, suite] of Object.entries(colorConvert)) {
|
||||
const name = sourceSpace === 'ansi16' ? 'ansi' : sourceSpace;
|
||||
if (sourceSpace === targetSpace) {
|
||||
styles[name] = wrap(identity, offset);
|
||||
} else if (typeof suite === 'object') {
|
||||
styles[name] = wrap(suite[targetSpace], offset);
|
||||
}
|
||||
}
|
||||
|
||||
return styles;
|
||||
};
|
||||
|
||||
function assembleStyles() {
|
||||
const codes = new Map();
|
||||
const styles = {
|
||||
modifier: {
|
||||
reset: [0, 0],
|
||||
// 21 isn't widely supported and 22 does the same thing
|
||||
bold: [1, 22],
|
||||
dim: [2, 22],
|
||||
italic: [3, 23],
|
||||
underline: [4, 24],
|
||||
inverse: [7, 27],
|
||||
hidden: [8, 28],
|
||||
strikethrough: [9, 29]
|
||||
},
|
||||
color: {
|
||||
black: [30, 39],
|
||||
red: [31, 39],
|
||||
green: [32, 39],
|
||||
yellow: [33, 39],
|
||||
blue: [34, 39],
|
||||
magenta: [35, 39],
|
||||
cyan: [36, 39],
|
||||
white: [37, 39],
|
||||
|
||||
// Bright color
|
||||
blackBright: [90, 39],
|
||||
redBright: [91, 39],
|
||||
greenBright: [92, 39],
|
||||
yellowBright: [93, 39],
|
||||
blueBright: [94, 39],
|
||||
magentaBright: [95, 39],
|
||||
cyanBright: [96, 39],
|
||||
whiteBright: [97, 39]
|
||||
},
|
||||
bgColor: {
|
||||
bgBlack: [40, 49],
|
||||
bgRed: [41, 49],
|
||||
bgGreen: [42, 49],
|
||||
bgYellow: [43, 49],
|
||||
bgBlue: [44, 49],
|
||||
bgMagenta: [45, 49],
|
||||
bgCyan: [46, 49],
|
||||
bgWhite: [47, 49],
|
||||
|
||||
// Bright color
|
||||
bgBlackBright: [100, 49],
|
||||
bgRedBright: [101, 49],
|
||||
bgGreenBright: [102, 49],
|
||||
bgYellowBright: [103, 49],
|
||||
bgBlueBright: [104, 49],
|
||||
bgMagentaBright: [105, 49],
|
||||
bgCyanBright: [106, 49],
|
||||
bgWhiteBright: [107, 49]
|
||||
}
|
||||
};
|
||||
|
||||
// Alias bright black as gray (and grey)
|
||||
styles.color.gray = styles.color.blackBright;
|
||||
styles.bgColor.bgGray = styles.bgColor.bgBlackBright;
|
||||
styles.color.grey = styles.color.blackBright;
|
||||
styles.bgColor.bgGrey = styles.bgColor.bgBlackBright;
|
||||
|
||||
for (const [groupName, group] of Object.entries(styles)) {
|
||||
for (const [styleName, style] of Object.entries(group)) {
|
||||
styles[styleName] = {
|
||||
open: `\u001B[${style[0]}m`,
|
||||
close: `\u001B[${style[1]}m`
|
||||
};
|
||||
|
||||
group[styleName] = styles[styleName];
|
||||
|
||||
codes.set(style[0], style[1]);
|
||||
}
|
||||
|
||||
Object.defineProperty(styles, groupName, {
|
||||
value: group,
|
||||
enumerable: false
|
||||
});
|
||||
}
|
||||
|
||||
Object.defineProperty(styles, 'codes', {
|
||||
value: codes,
|
||||
enumerable: false
|
||||
});
|
||||
|
||||
styles.color.close = '\u001B[39m';
|
||||
styles.bgColor.close = '\u001B[49m';
|
||||
|
||||
setLazyProperty(styles.color, 'ansi', () => makeDynamicStyles(wrapAnsi16, 'ansi16', ansi2ansi, false));
|
||||
setLazyProperty(styles.color, 'ansi256', () => makeDynamicStyles(wrapAnsi256, 'ansi256', ansi2ansi, false));
|
||||
setLazyProperty(styles.color, 'ansi16m', () => makeDynamicStyles(wrapAnsi16m, 'rgb', rgb2rgb, false));
|
||||
setLazyProperty(styles.bgColor, 'ansi', () => makeDynamicStyles(wrapAnsi16, 'ansi16', ansi2ansi, true));
|
||||
setLazyProperty(styles.bgColor, 'ansi256', () => makeDynamicStyles(wrapAnsi256, 'ansi256', ansi2ansi, true));
|
||||
setLazyProperty(styles.bgColor, 'ansi16m', () => makeDynamicStyles(wrapAnsi16m, 'rgb', rgb2rgb, true));
|
||||
|
||||
return styles;
|
||||
}
|
||||
|
||||
// Make the export immutable
|
||||
Object.defineProperty(module, 'exports', {
|
||||
enumerable: true,
|
||||
get: assembleStyles
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
{
|
||||
"name": "ansi-styles",
|
||||
"version": "4.3.0",
|
||||
"description": "ANSI escape codes for styling strings in the terminal",
|
||||
"license": "MIT",
|
||||
"repository": "chalk/ansi-styles",
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "xo && ava && tsd",
|
||||
"screenshot": "svg-term --command='node screenshot' --out=screenshot.svg --padding=3 --width=55 --height=3 --at=1000 --no-cursor"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"index.d.ts"
|
||||
],
|
||||
"keywords": [
|
||||
"ansi",
|
||||
"styles",
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"tty",
|
||||
"escape",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"log",
|
||||
"logging",
|
||||
"command-line",
|
||||
"text"
|
||||
],
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/color-convert": "^1.9.0",
|
||||
"ava": "^2.3.0",
|
||||
"svg-term-cli": "^2.1.1",
|
||||
"tsd": "^0.11.0",
|
||||
"xo": "^0.25.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
# ansi-styles [](https://travis-ci.org/chalk/ansi-styles)
|
||||
|
||||
> [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code#Colors_and_Styles) for styling strings in the terminal
|
||||
|
||||
You probably want the higher-level [chalk](https://github.com/chalk/chalk) module for styling your strings.
|
||||
|
||||
<img src="screenshot.svg" width="900">
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
$ npm install ansi-styles
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
const style = require('ansi-styles');
|
||||
|
||||
console.log(`${style.green.open}Hello world!${style.green.close}`);
|
||||
|
||||
|
||||
// Color conversion between 16/256/truecolor
|
||||
// NOTE: If conversion goes to 16 colors or 256 colors, the original color
|
||||
// may be degraded to fit that color palette. This means terminals
|
||||
// that do not support 16 million colors will best-match the
|
||||
// original color.
|
||||
console.log(style.bgColor.ansi.hsl(120, 80, 72) + 'Hello world!' + style.bgColor.close);
|
||||
console.log(style.color.ansi256.rgb(199, 20, 250) + 'Hello world!' + style.color.close);
|
||||
console.log(style.color.ansi16m.hex('#abcdef') + 'Hello world!' + style.color.close);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
Each style has an `open` and `close` property.
|
||||
|
||||
## Styles
|
||||
|
||||
### Modifiers
|
||||
|
||||
- `reset`
|
||||
- `bold`
|
||||
- `dim`
|
||||
- `italic` *(Not widely supported)*
|
||||
- `underline`
|
||||
- `inverse`
|
||||
- `hidden`
|
||||
- `strikethrough` *(Not widely supported)*
|
||||
|
||||
### Colors
|
||||
|
||||
- `black`
|
||||
- `red`
|
||||
- `green`
|
||||
- `yellow`
|
||||
- `blue`
|
||||
- `magenta`
|
||||
- `cyan`
|
||||
- `white`
|
||||
- `blackBright` (alias: `gray`, `grey`)
|
||||
- `redBright`
|
||||
- `greenBright`
|
||||
- `yellowBright`
|
||||
- `blueBright`
|
||||
- `magentaBright`
|
||||
- `cyanBright`
|
||||
- `whiteBright`
|
||||
|
||||
### Background colors
|
||||
|
||||
- `bgBlack`
|
||||
- `bgRed`
|
||||
- `bgGreen`
|
||||
- `bgYellow`
|
||||
- `bgBlue`
|
||||
- `bgMagenta`
|
||||
- `bgCyan`
|
||||
- `bgWhite`
|
||||
- `bgBlackBright` (alias: `bgGray`, `bgGrey`)
|
||||
- `bgRedBright`
|
||||
- `bgGreenBright`
|
||||
- `bgYellowBright`
|
||||
- `bgBlueBright`
|
||||
- `bgMagentaBright`
|
||||
- `bgCyanBright`
|
||||
- `bgWhiteBright`
|
||||
|
||||
## Advanced usage
|
||||
|
||||
By default, you get a map of styles, but the styles are also available as groups. They are non-enumerable so they don't show up unless you access them explicitly. This makes it easier to expose only a subset in a higher-level module.
|
||||
|
||||
- `style.modifier`
|
||||
- `style.color`
|
||||
- `style.bgColor`
|
||||
|
||||
###### Example
|
||||
|
||||
```js
|
||||
console.log(style.color.green.open);
|
||||
```
|
||||
|
||||
Raw escape codes (i.e. without the CSI escape prefix `\u001B[` and render mode postfix `m`) are available under `style.codes`, which returns a `Map` with the open codes as keys and close codes as values.
|
||||
|
||||
###### Example
|
||||
|
||||
```js
|
||||
console.log(style.codes.get(36));
|
||||
//=> 39
|
||||
```
|
||||
|
||||
## [256 / 16 million (TrueColor) support](https://gist.github.com/XVilka/8346728)
|
||||
|
||||
`ansi-styles` uses the [`color-convert`](https://github.com/Qix-/color-convert) package to allow for converting between various colors and ANSI escapes, with support for 256 and 16 million colors.
|
||||
|
||||
The following color spaces from `color-convert` are supported:
|
||||
|
||||
- `rgb`
|
||||
- `hex`
|
||||
- `keyword`
|
||||
- `hsl`
|
||||
- `hsv`
|
||||
- `hwb`
|
||||
- `ansi`
|
||||
- `ansi256`
|
||||
|
||||
To use these, call the associated conversion function with the intended output, for example:
|
||||
|
||||
```js
|
||||
style.color.ansi.rgb(100, 200, 15); // RGB to 16 color ansi foreground code
|
||||
style.bgColor.ansi.rgb(100, 200, 15); // RGB to 16 color ansi background code
|
||||
|
||||
style.color.ansi256.hsl(120, 100, 60); // HSL to 256 color ansi foreground code
|
||||
style.bgColor.ansi256.hsl(120, 100, 60); // HSL to 256 color ansi foreground code
|
||||
|
||||
style.color.ansi16m.hex('#C0FFEE'); // Hex (RGB) to 16 million color foreground code
|
||||
style.bgColor.ansi16m.hex('#C0FFEE'); // Hex (RGB) to 16 million color background code
|
||||
```
|
||||
|
||||
## Related
|
||||
|
||||
- [ansi-escapes](https://github.com/sindresorhus/ansi-escapes) - ANSI escape codes for manipulating the terminal
|
||||
|
||||
## Maintainers
|
||||
|
||||
- [Sindre Sorhus](https://github.com/sindresorhus)
|
||||
- [Josh Junon](https://github.com/qix-)
|
||||
|
||||
## For enterprise
|
||||
|
||||
Available as part of the Tidelift Subscription.
|
||||
|
||||
The maintainers of `ansi-styles` and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-ansi-styles?utm_source=npm-ansi-styles&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
|
||||
|
|
@ -1,415 +0,0 @@
|
|||
/**
|
||||
Basic foreground colors.
|
||||
|
||||
[More colors here.](https://github.com/chalk/chalk/blob/master/readme.md#256-and-truecolor-color-support)
|
||||
*/
|
||||
declare type ForegroundColor =
|
||||
| 'black'
|
||||
| 'red'
|
||||
| 'green'
|
||||
| 'yellow'
|
||||
| 'blue'
|
||||
| 'magenta'
|
||||
| 'cyan'
|
||||
| 'white'
|
||||
| 'gray'
|
||||
| 'grey'
|
||||
| 'blackBright'
|
||||
| 'redBright'
|
||||
| 'greenBright'
|
||||
| 'yellowBright'
|
||||
| 'blueBright'
|
||||
| 'magentaBright'
|
||||
| 'cyanBright'
|
||||
| 'whiteBright';
|
||||
|
||||
/**
|
||||
Basic background colors.
|
||||
|
||||
[More colors here.](https://github.com/chalk/chalk/blob/master/readme.md#256-and-truecolor-color-support)
|
||||
*/
|
||||
declare type BackgroundColor =
|
||||
| 'bgBlack'
|
||||
| 'bgRed'
|
||||
| 'bgGreen'
|
||||
| 'bgYellow'
|
||||
| 'bgBlue'
|
||||
| 'bgMagenta'
|
||||
| 'bgCyan'
|
||||
| 'bgWhite'
|
||||
| 'bgGray'
|
||||
| 'bgGrey'
|
||||
| 'bgBlackBright'
|
||||
| 'bgRedBright'
|
||||
| 'bgGreenBright'
|
||||
| 'bgYellowBright'
|
||||
| 'bgBlueBright'
|
||||
| 'bgMagentaBright'
|
||||
| 'bgCyanBright'
|
||||
| 'bgWhiteBright';
|
||||
|
||||
/**
|
||||
Basic colors.
|
||||
|
||||
[More colors here.](https://github.com/chalk/chalk/blob/master/readme.md#256-and-truecolor-color-support)
|
||||
*/
|
||||
declare type Color = ForegroundColor | BackgroundColor;
|
||||
|
||||
declare type Modifiers =
|
||||
| 'reset'
|
||||
| 'bold'
|
||||
| 'dim'
|
||||
| 'italic'
|
||||
| 'underline'
|
||||
| 'inverse'
|
||||
| 'hidden'
|
||||
| 'strikethrough'
|
||||
| 'visible';
|
||||
|
||||
declare namespace chalk {
|
||||
/**
|
||||
Levels:
|
||||
- `0` - All colors disabled.
|
||||
- `1` - Basic 16 colors support.
|
||||
- `2` - ANSI 256 colors support.
|
||||
- `3` - Truecolor 16 million colors support.
|
||||
*/
|
||||
type Level = 0 | 1 | 2 | 3;
|
||||
|
||||
interface Options {
|
||||
/**
|
||||
Specify the color support for Chalk.
|
||||
|
||||
By default, color support is automatically detected based on the environment.
|
||||
|
||||
Levels:
|
||||
- `0` - All colors disabled.
|
||||
- `1` - Basic 16 colors support.
|
||||
- `2` - ANSI 256 colors support.
|
||||
- `3` - Truecolor 16 million colors support.
|
||||
*/
|
||||
level?: Level;
|
||||
}
|
||||
|
||||
/**
|
||||
Return a new Chalk instance.
|
||||
*/
|
||||
type Instance = new (options?: Options) => Chalk;
|
||||
|
||||
/**
|
||||
Detect whether the terminal supports color.
|
||||
*/
|
||||
interface ColorSupport {
|
||||
/**
|
||||
The color level used by Chalk.
|
||||
*/
|
||||
level: Level;
|
||||
|
||||
/**
|
||||
Return whether Chalk supports basic 16 colors.
|
||||
*/
|
||||
hasBasic: boolean;
|
||||
|
||||
/**
|
||||
Return whether Chalk supports ANSI 256 colors.
|
||||
*/
|
||||
has256: boolean;
|
||||
|
||||
/**
|
||||
Return whether Chalk supports Truecolor 16 million colors.
|
||||
*/
|
||||
has16m: boolean;
|
||||
}
|
||||
|
||||
interface ChalkFunction {
|
||||
/**
|
||||
Use a template string.
|
||||
|
||||
@remarks Template literals are unsupported for nested calls (see [issue #341](https://github.com/chalk/chalk/issues/341))
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
log(chalk`
|
||||
CPU: {red ${cpu.totalPercent}%}
|
||||
RAM: {green ${ram.used / ram.total * 100}%}
|
||||
DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
|
||||
`);
|
||||
```
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
log(chalk.red.bgBlack`2 + 3 = {bold ${2 + 3}}`)
|
||||
```
|
||||
*/
|
||||
(text: TemplateStringsArray, ...placeholders: unknown[]): string;
|
||||
|
||||
(...text: unknown[]): string;
|
||||
}
|
||||
|
||||
interface Chalk extends ChalkFunction {
|
||||
/**
|
||||
Return a new Chalk instance.
|
||||
*/
|
||||
Instance: Instance;
|
||||
|
||||
/**
|
||||
The color support for Chalk.
|
||||
|
||||
By default, color support is automatically detected based on the environment.
|
||||
|
||||
Levels:
|
||||
- `0` - All colors disabled.
|
||||
- `1` - Basic 16 colors support.
|
||||
- `2` - ANSI 256 colors support.
|
||||
- `3` - Truecolor 16 million colors support.
|
||||
*/
|
||||
level: Level;
|
||||
|
||||
/**
|
||||
Use HEX value to set text color.
|
||||
|
||||
@param color - Hexadecimal value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
chalk.hex('#DEADED');
|
||||
```
|
||||
*/
|
||||
hex(color: string): Chalk;
|
||||
|
||||
/**
|
||||
Use keyword color value to set text color.
|
||||
|
||||
@param color - Keyword value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
chalk.keyword('orange');
|
||||
```
|
||||
*/
|
||||
keyword(color: string): Chalk;
|
||||
|
||||
/**
|
||||
Use RGB values to set text color.
|
||||
*/
|
||||
rgb(red: number, green: number, blue: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HSL values to set text color.
|
||||
*/
|
||||
hsl(hue: number, saturation: number, lightness: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HSV values to set text color.
|
||||
*/
|
||||
hsv(hue: number, saturation: number, value: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HWB values to set text color.
|
||||
*/
|
||||
hwb(hue: number, whiteness: number, blackness: number): Chalk;
|
||||
|
||||
/**
|
||||
Use a [Select/Set Graphic Rendition](https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters) (SGR) [color code number](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) to set text color.
|
||||
|
||||
30 <= code && code < 38 || 90 <= code && code < 98
|
||||
For example, 31 for red, 91 for redBright.
|
||||
*/
|
||||
ansi(code: number): Chalk;
|
||||
|
||||
/**
|
||||
Use a [8-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) to set text color.
|
||||
*/
|
||||
ansi256(index: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HEX value to set background color.
|
||||
|
||||
@param color - Hexadecimal value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
chalk.bgHex('#DEADED');
|
||||
```
|
||||
*/
|
||||
bgHex(color: string): Chalk;
|
||||
|
||||
/**
|
||||
Use keyword color value to set background color.
|
||||
|
||||
@param color - Keyword value representing the desired color.
|
||||
|
||||
@example
|
||||
```
|
||||
import chalk = require('chalk');
|
||||
|
||||
chalk.bgKeyword('orange');
|
||||
```
|
||||
*/
|
||||
bgKeyword(color: string): Chalk;
|
||||
|
||||
/**
|
||||
Use RGB values to set background color.
|
||||
*/
|
||||
bgRgb(red: number, green: number, blue: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HSL values to set background color.
|
||||
*/
|
||||
bgHsl(hue: number, saturation: number, lightness: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HSV values to set background color.
|
||||
*/
|
||||
bgHsv(hue: number, saturation: number, value: number): Chalk;
|
||||
|
||||
/**
|
||||
Use HWB values to set background color.
|
||||
*/
|
||||
bgHwb(hue: number, whiteness: number, blackness: number): Chalk;
|
||||
|
||||
/**
|
||||
Use a [Select/Set Graphic Rendition](https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters) (SGR) [color code number](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) to set background color.
|
||||
|
||||
30 <= code && code < 38 || 90 <= code && code < 98
|
||||
For example, 31 for red, 91 for redBright.
|
||||
Use the foreground code, not the background code (for example, not 41, nor 101).
|
||||
*/
|
||||
bgAnsi(code: number): Chalk;
|
||||
|
||||
/**
|
||||
Use a [8-bit unsigned number](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) to set background color.
|
||||
*/
|
||||
bgAnsi256(index: number): Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Resets the current color chain.
|
||||
*/
|
||||
readonly reset: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Make text bold.
|
||||
*/
|
||||
readonly bold: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Emitting only a small amount of light.
|
||||
*/
|
||||
readonly dim: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Make text italic. (Not widely supported)
|
||||
*/
|
||||
readonly italic: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Make text underline. (Not widely supported)
|
||||
*/
|
||||
readonly underline: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Inverse background and foreground colors.
|
||||
*/
|
||||
readonly inverse: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Prints the text, but makes it invisible.
|
||||
*/
|
||||
readonly hidden: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Puts a horizontal line through the center of the text. (Not widely supported)
|
||||
*/
|
||||
readonly strikethrough: Chalk;
|
||||
|
||||
/**
|
||||
Modifier: Prints the text only when Chalk has a color support level > 0.
|
||||
Can be useful for things that are purely cosmetic.
|
||||
*/
|
||||
readonly visible: Chalk;
|
||||
|
||||
readonly black: Chalk;
|
||||
readonly red: Chalk;
|
||||
readonly green: Chalk;
|
||||
readonly yellow: Chalk;
|
||||
readonly blue: Chalk;
|
||||
readonly magenta: Chalk;
|
||||
readonly cyan: Chalk;
|
||||
readonly white: Chalk;
|
||||
|
||||
/*
|
||||
Alias for `blackBright`.
|
||||
*/
|
||||
readonly gray: Chalk;
|
||||
|
||||
/*
|
||||
Alias for `blackBright`.
|
||||
*/
|
||||
readonly grey: Chalk;
|
||||
|
||||
readonly blackBright: Chalk;
|
||||
readonly redBright: Chalk;
|
||||
readonly greenBright: Chalk;
|
||||
readonly yellowBright: Chalk;
|
||||
readonly blueBright: Chalk;
|
||||
readonly magentaBright: Chalk;
|
||||
readonly cyanBright: Chalk;
|
||||
readonly whiteBright: Chalk;
|
||||
|
||||
readonly bgBlack: Chalk;
|
||||
readonly bgRed: Chalk;
|
||||
readonly bgGreen: Chalk;
|
||||
readonly bgYellow: Chalk;
|
||||
readonly bgBlue: Chalk;
|
||||
readonly bgMagenta: Chalk;
|
||||
readonly bgCyan: Chalk;
|
||||
readonly bgWhite: Chalk;
|
||||
|
||||
/*
|
||||
Alias for `bgBlackBright`.
|
||||
*/
|
||||
readonly bgGray: Chalk;
|
||||
|
||||
/*
|
||||
Alias for `bgBlackBright`.
|
||||
*/
|
||||
readonly bgGrey: Chalk;
|
||||
|
||||
readonly bgBlackBright: Chalk;
|
||||
readonly bgRedBright: Chalk;
|
||||
readonly bgGreenBright: Chalk;
|
||||
readonly bgYellowBright: Chalk;
|
||||
readonly bgBlueBright: Chalk;
|
||||
readonly bgMagentaBright: Chalk;
|
||||
readonly bgCyanBright: Chalk;
|
||||
readonly bgWhiteBright: Chalk;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Main Chalk object that allows to chain styles together.
|
||||
Call the last one as a method with a string argument.
|
||||
Order doesn't matter, and later styles take precedent in case of a conflict.
|
||||
This simply means that `chalk.red.yellow.green` is equivalent to `chalk.green`.
|
||||
*/
|
||||
declare const chalk: chalk.Chalk & chalk.ChalkFunction & {
|
||||
supportsColor: chalk.ColorSupport | false;
|
||||
Level: chalk.Level;
|
||||
Color: Color;
|
||||
ForegroundColor: ForegroundColor;
|
||||
BackgroundColor: BackgroundColor;
|
||||
Modifiers: Modifiers;
|
||||
stderr: chalk.Chalk & {supportsColor: chalk.ColorSupport | false};
|
||||
};
|
||||
|
||||
export = chalk;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
{
|
||||
"name": "chalk",
|
||||
"version": "4.1.2",
|
||||
"description": "Terminal string styling done right",
|
||||
"license": "MIT",
|
||||
"repository": "chalk/chalk",
|
||||
"funding": "https://github.com/chalk/chalk?sponsor=1",
|
||||
"main": "source",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "xo && nyc ava && tsd",
|
||||
"bench": "matcha benchmark.js"
|
||||
},
|
||||
"files": [
|
||||
"source",
|
||||
"index.d.ts"
|
||||
],
|
||||
"keywords": [
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"string",
|
||||
"str",
|
||||
"ansi",
|
||||
"style",
|
||||
"styles",
|
||||
"tty",
|
||||
"formatting",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"log",
|
||||
"logging",
|
||||
"command-line",
|
||||
"text"
|
||||
],
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^2.4.0",
|
||||
"coveralls": "^3.0.7",
|
||||
"execa": "^4.0.0",
|
||||
"import-fresh": "^3.1.0",
|
||||
"matcha": "^0.7.0",
|
||||
"nyc": "^15.0.0",
|
||||
"resolve-from": "^5.0.0",
|
||||
"tsd": "^0.7.4",
|
||||
"xo": "^0.28.2"
|
||||
},
|
||||
"xo": {
|
||||
"rules": {
|
||||
"unicorn/prefer-string-slice": "off",
|
||||
"unicorn/prefer-includes": "off",
|
||||
"@typescript-eslint/member-ordering": "off",
|
||||
"no-redeclare": "off",
|
||||
"unicorn/string-content": "off",
|
||||
"unicorn/better-regex": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,341 +0,0 @@
|
|||
<h1 align="center">
|
||||
<br>
|
||||
<br>
|
||||
<img width="320" src="media/logo.svg" alt="Chalk">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</h1>
|
||||
|
||||
> Terminal string styling done right
|
||||
|
||||
[](https://travis-ci.org/chalk/chalk) [](https://coveralls.io/github/chalk/chalk?branch=master) [](https://www.npmjs.com/package/chalk?activeTab=dependents) [](https://www.npmjs.com/package/chalk) [](https://www.youtube.com/watch?v=9auOCbH5Ns4) [](https://github.com/xojs/xo)  [](https://repl.it/github/chalk/chalk)
|
||||
|
||||
<img src="https://cdn.jsdelivr.net/gh/chalk/ansi-styles@8261697c95bf34b6c7767e2cbe9941a851d59385/screenshot.svg" width="900">
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
<p>
|
||||
<p>
|
||||
<sup>
|
||||
Sindre Sorhus' open source work is supported by the community on <a href="https://github.com/sponsors/sindresorhus">GitHub Sponsors</a> and <a href="https://stakes.social/0x44d871aebF0126Bf646753E2C976Aa7e68A66c15">Dev</a>
|
||||
</sup>
|
||||
</p>
|
||||
<sup>Special thanks to:</sup>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://standardresume.co/tech">
|
||||
<img src="https://sindresorhus.com/assets/thanks/standard-resume-logo.svg" width="160"/>
|
||||
</a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://retool.com/?utm_campaign=sindresorhus">
|
||||
<img src="https://sindresorhus.com/assets/thanks/retool-logo.svg" width="230"/>
|
||||
</a>
|
||||
<br>
|
||||
<br>
|
||||
<a href="https://doppler.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=chalk&utm_source=github">
|
||||
<div>
|
||||
<img src="https://dashboard.doppler.com/imgs/logo-long.svg" width="240" alt="Doppler">
|
||||
</div>
|
||||
<b>All your environment variables, in one place</b>
|
||||
<div>
|
||||
<span>Stop struggling with scattered API keys, hacking together home-brewed tools,</span>
|
||||
<br>
|
||||
<span>and avoiding access controls. Keep your team and servers in sync with Doppler.</span>
|
||||
</div>
|
||||
</a>
|
||||
<br>
|
||||
<a href="https://uibakery.io/?utm_source=chalk&utm_medium=sponsor&utm_campaign=github">
|
||||
<div>
|
||||
<img src="https://sindresorhus.com/assets/thanks/uibakery-logo.jpg" width="270" alt="UI Bakery">
|
||||
</div>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<br>
|
||||
|
||||
## Highlights
|
||||
|
||||
- Expressive API
|
||||
- Highly performant
|
||||
- Ability to nest styles
|
||||
- [256/Truecolor color support](#256-and-truecolor-color-support)
|
||||
- Auto-detects color support
|
||||
- Doesn't extend `String.prototype`
|
||||
- Clean and focused
|
||||
- Actively maintained
|
||||
- [Used by ~50,000 packages](https://www.npmjs.com/browse/depended/chalk) as of January 1, 2020
|
||||
|
||||
## Install
|
||||
|
||||
```console
|
||||
$ npm install chalk
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
const chalk = require('chalk');
|
||||
|
||||
console.log(chalk.blue('Hello world!'));
|
||||
```
|
||||
|
||||
Chalk comes with an easy to use composable API where you just chain and nest the styles you want.
|
||||
|
||||
```js
|
||||
const chalk = require('chalk');
|
||||
const log = console.log;
|
||||
|
||||
// Combine styled and normal strings
|
||||
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
|
||||
|
||||
// Compose multiple styles using the chainable API
|
||||
log(chalk.blue.bgRed.bold('Hello world!'));
|
||||
|
||||
// Pass in multiple arguments
|
||||
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
|
||||
|
||||
// Nest styles
|
||||
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
|
||||
|
||||
// Nest styles of the same type even (color, underline, background)
|
||||
log(chalk.green(
|
||||
'I am a green line ' +
|
||||
chalk.blue.underline.bold('with a blue substring') +
|
||||
' that becomes green again!'
|
||||
));
|
||||
|
||||
// ES2015 template literal
|
||||
log(`
|
||||
CPU: ${chalk.red('90%')}
|
||||
RAM: ${chalk.green('40%')}
|
||||
DISK: ${chalk.yellow('70%')}
|
||||
`);
|
||||
|
||||
// ES2015 tagged template literal
|
||||
log(chalk`
|
||||
CPU: {red ${cpu.totalPercent}%}
|
||||
RAM: {green ${ram.used / ram.total * 100}%}
|
||||
DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
|
||||
`);
|
||||
|
||||
// Use RGB colors in terminal emulators that support it.
|
||||
log(chalk.keyword('orange')('Yay for orange colored text!'));
|
||||
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
|
||||
log(chalk.hex('#DEADED').bold('Bold gray!'));
|
||||
```
|
||||
|
||||
Easily define your own themes:
|
||||
|
||||
```js
|
||||
const chalk = require('chalk');
|
||||
|
||||
const error = chalk.bold.red;
|
||||
const warning = chalk.keyword('orange');
|
||||
|
||||
console.log(error('Error!'));
|
||||
console.log(warning('Warning!'));
|
||||
```
|
||||
|
||||
Take advantage of console.log [string substitution](https://nodejs.org/docs/latest/api/console.html#console_console_log_data_args):
|
||||
|
||||
```js
|
||||
const name = 'Sindre';
|
||||
console.log(chalk.green('Hello %s'), name);
|
||||
//=> 'Hello Sindre'
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### chalk.`<style>[.<style>...](string, [string...])`
|
||||
|
||||
Example: `chalk.red.bold.underline('Hello', 'world');`
|
||||
|
||||
Chain [styles](#styles) and call the last one as a method with a string argument. Order doesn't matter, and later styles take precedent in case of a conflict. This simply means that `chalk.red.yellow.green` is equivalent to `chalk.green`.
|
||||
|
||||
Multiple arguments will be separated by space.
|
||||
|
||||
### chalk.level
|
||||
|
||||
Specifies the level of color support.
|
||||
|
||||
Color support is automatically detected, but you can override it by setting the `level` property. You should however only do this in your own code as it applies globally to all Chalk consumers.
|
||||
|
||||
If you need to change this in a reusable module, create a new instance:
|
||||
|
||||
```js
|
||||
const ctx = new chalk.Instance({level: 0});
|
||||
```
|
||||
|
||||
| Level | Description |
|
||||
| :---: | :--- |
|
||||
| `0` | All colors disabled |
|
||||
| `1` | Basic color support (16 colors) |
|
||||
| `2` | 256 color support |
|
||||
| `3` | Truecolor support (16 million colors) |
|
||||
|
||||
### chalk.supportsColor
|
||||
|
||||
Detect whether the terminal [supports color](https://github.com/chalk/supports-color). Used internally and handled for you, but exposed for convenience.
|
||||
|
||||
Can be overridden by the user with the flags `--color` and `--no-color`. For situations where using `--color` is not possible, use the environment variable `FORCE_COLOR=1` (level 1), `FORCE_COLOR=2` (level 2), or `FORCE_COLOR=3` (level 3) to forcefully enable color, or `FORCE_COLOR=0` to forcefully disable. The use of `FORCE_COLOR` overrides all other color support checks.
|
||||
|
||||
Explicit 256/Truecolor mode can be enabled using the `--color=256` and `--color=16m` flags, respectively.
|
||||
|
||||
### chalk.stderr and chalk.stderr.supportsColor
|
||||
|
||||
`chalk.stderr` contains a separate instance configured with color support detected for `stderr` stream instead of `stdout`. Override rules from `chalk.supportsColor` apply to this too. `chalk.stderr.supportsColor` is exposed for convenience.
|
||||
|
||||
## Styles
|
||||
|
||||
### Modifiers
|
||||
|
||||
- `reset` - Resets the current color chain.
|
||||
- `bold` - Make text bold.
|
||||
- `dim` - Emitting only a small amount of light.
|
||||
- `italic` - Make text italic. *(Not widely supported)*
|
||||
- `underline` - Make text underline. *(Not widely supported)*
|
||||
- `inverse`- Inverse background and foreground colors.
|
||||
- `hidden` - Prints the text, but makes it invisible.
|
||||
- `strikethrough` - Puts a horizontal line through the center of the text. *(Not widely supported)*
|
||||
- `visible`- Prints the text only when Chalk has a color level > 0. Can be useful for things that are purely cosmetic.
|
||||
|
||||
### Colors
|
||||
|
||||
- `black`
|
||||
- `red`
|
||||
- `green`
|
||||
- `yellow`
|
||||
- `blue`
|
||||
- `magenta`
|
||||
- `cyan`
|
||||
- `white`
|
||||
- `blackBright` (alias: `gray`, `grey`)
|
||||
- `redBright`
|
||||
- `greenBright`
|
||||
- `yellowBright`
|
||||
- `blueBright`
|
||||
- `magentaBright`
|
||||
- `cyanBright`
|
||||
- `whiteBright`
|
||||
|
||||
### Background colors
|
||||
|
||||
- `bgBlack`
|
||||
- `bgRed`
|
||||
- `bgGreen`
|
||||
- `bgYellow`
|
||||
- `bgBlue`
|
||||
- `bgMagenta`
|
||||
- `bgCyan`
|
||||
- `bgWhite`
|
||||
- `bgBlackBright` (alias: `bgGray`, `bgGrey`)
|
||||
- `bgRedBright`
|
||||
- `bgGreenBright`
|
||||
- `bgYellowBright`
|
||||
- `bgBlueBright`
|
||||
- `bgMagentaBright`
|
||||
- `bgCyanBright`
|
||||
- `bgWhiteBright`
|
||||
|
||||
## Tagged template literal
|
||||
|
||||
Chalk can be used as a [tagged template literal](https://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals).
|
||||
|
||||
```js
|
||||
const chalk = require('chalk');
|
||||
|
||||
const miles = 18;
|
||||
const calculateFeet = miles => miles * 5280;
|
||||
|
||||
console.log(chalk`
|
||||
There are {bold 5280 feet} in a mile.
|
||||
In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.
|
||||
`);
|
||||
```
|
||||
|
||||
Blocks are delimited by an opening curly brace (`{`), a style, some content, and a closing curly brace (`}`).
|
||||
|
||||
Template styles are chained exactly like normal Chalk styles. The following three statements are equivalent:
|
||||
|
||||
```js
|
||||
console.log(chalk.bold.rgb(10, 100, 200)('Hello!'));
|
||||
console.log(chalk.bold.rgb(10, 100, 200)`Hello!`);
|
||||
console.log(chalk`{bold.rgb(10,100,200) Hello!}`);
|
||||
```
|
||||
|
||||
Note that function styles (`rgb()`, `hsl()`, `keyword()`, etc.) may not contain spaces between parameters.
|
||||
|
||||
All interpolated values (`` chalk`${foo}` ``) are converted to strings via the `.toString()` method. All curly braces (`{` and `}`) in interpolated value strings are escaped.
|
||||
|
||||
## 256 and Truecolor color support
|
||||
|
||||
Chalk supports 256 colors and [Truecolor](https://gist.github.com/XVilka/8346728) (16 million colors) on supported terminal apps.
|
||||
|
||||
Colors are downsampled from 16 million RGB values to an ANSI color format that is supported by the terminal emulator (or by specifying `{level: n}` as a Chalk option). For example, Chalk configured to run at level 1 (basic color support) will downsample an RGB value of #FF0000 (red) to 31 (ANSI escape for red).
|
||||
|
||||
Examples:
|
||||
|
||||
- `chalk.hex('#DEADED').underline('Hello, world!')`
|
||||
- `chalk.keyword('orange')('Some orange text')`
|
||||
- `chalk.rgb(15, 100, 204).inverse('Hello!')`
|
||||
|
||||
Background versions of these models are prefixed with `bg` and the first level of the module capitalized (e.g. `keyword` for foreground colors and `bgKeyword` for background colors).
|
||||
|
||||
- `chalk.bgHex('#DEADED').underline('Hello, world!')`
|
||||
- `chalk.bgKeyword('orange')('Some orange text')`
|
||||
- `chalk.bgRgb(15, 100, 204).inverse('Hello!')`
|
||||
|
||||
The following color models can be used:
|
||||
|
||||
- [`rgb`](https://en.wikipedia.org/wiki/RGB_color_model) - Example: `chalk.rgb(255, 136, 0).bold('Orange!')`
|
||||
- [`hex`](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) - Example: `chalk.hex('#FF8800').bold('Orange!')`
|
||||
- [`keyword`](https://www.w3.org/wiki/CSS/Properties/color/keywords) (CSS keywords) - Example: `chalk.keyword('orange').bold('Orange!')`
|
||||
- [`hsl`](https://en.wikipedia.org/wiki/HSL_and_HSV) - Example: `chalk.hsl(32, 100, 50).bold('Orange!')`
|
||||
- [`hsv`](https://en.wikipedia.org/wiki/HSL_and_HSV) - Example: `chalk.hsv(32, 100, 100).bold('Orange!')`
|
||||
- [`hwb`](https://en.wikipedia.org/wiki/HWB_color_model) - Example: `chalk.hwb(32, 0, 50).bold('Orange!')`
|
||||
- [`ansi`](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) - Example: `chalk.ansi(31).bgAnsi(93)('red on yellowBright')`
|
||||
- [`ansi256`](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) - Example: `chalk.bgAnsi256(194)('Honeydew, more or less')`
|
||||
|
||||
## Windows
|
||||
|
||||
If you're on Windows, do yourself a favor and use [Windows Terminal](https://github.com/microsoft/terminal) instead of `cmd.exe`.
|
||||
|
||||
## Origin story
|
||||
|
||||
[colors.js](https://github.com/Marak/colors.js) used to be the most popular string styling module, but it has serious deficiencies like extending `String.prototype` which causes all kinds of [problems](https://github.com/yeoman/yo/issues/68) and the package is unmaintained. Although there are other packages, they either do too much or not enough. Chalk is a clean and focused alternative.
|
||||
|
||||
## chalk for enterprise
|
||||
|
||||
Available as part of the Tidelift Subscription.
|
||||
|
||||
The maintainers of chalk and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-chalk?utm_source=npm-chalk&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
|
||||
|
||||
## Related
|
||||
|
||||
- [chalk-cli](https://github.com/chalk/chalk-cli) - CLI for this module
|
||||
- [ansi-styles](https://github.com/chalk/ansi-styles) - ANSI escape codes for styling strings in the terminal
|
||||
- [supports-color](https://github.com/chalk/supports-color) - Detect whether a terminal supports color
|
||||
- [strip-ansi](https://github.com/chalk/strip-ansi) - Strip ANSI escape codes
|
||||
- [strip-ansi-stream](https://github.com/chalk/strip-ansi-stream) - Strip ANSI escape codes from a stream
|
||||
- [has-ansi](https://github.com/chalk/has-ansi) - Check if a string has ANSI escape codes
|
||||
- [ansi-regex](https://github.com/chalk/ansi-regex) - Regular expression for matching ANSI escape codes
|
||||
- [wrap-ansi](https://github.com/chalk/wrap-ansi) - Wordwrap a string with ANSI escape codes
|
||||
- [slice-ansi](https://github.com/chalk/slice-ansi) - Slice a string with ANSI escape codes
|
||||
- [color-convert](https://github.com/qix-/color-convert) - Converts colors between different models
|
||||
- [chalk-animation](https://github.com/bokub/chalk-animation) - Animate strings in the terminal
|
||||
- [gradient-string](https://github.com/bokub/gradient-string) - Apply color gradients to strings
|
||||
- [chalk-pipe](https://github.com/LitoMore/chalk-pipe) - Create chalk style schemes with simpler style strings
|
||||
- [terminal-link](https://github.com/sindresorhus/terminal-link) - Create clickable links in the terminal
|
||||
|
||||
## Maintainers
|
||||
|
||||
- [Sindre Sorhus](https://github.com/sindresorhus)
|
||||
- [Josh Junon](https://github.com/qix-)
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
'use strict';
|
||||
const ansiStyles = require('ansi-styles');
|
||||
const {stdout: stdoutColor, stderr: stderrColor} = require('supports-color');
|
||||
const {
|
||||
stringReplaceAll,
|
||||
stringEncaseCRLFWithFirstIndex
|
||||
} = require('./util');
|
||||
|
||||
const {isArray} = Array;
|
||||
|
||||
// `supportsColor.level` → `ansiStyles.color[name]` mapping
|
||||
const levelMapping = [
|
||||
'ansi',
|
||||
'ansi',
|
||||
'ansi256',
|
||||
'ansi16m'
|
||||
];
|
||||
|
||||
const styles = Object.create(null);
|
||||
|
||||
const applyOptions = (object, options = {}) => {
|
||||
if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
|
||||
throw new Error('The `level` option should be an integer from 0 to 3');
|
||||
}
|
||||
|
||||
// Detect level if not set manually
|
||||
const colorLevel = stdoutColor ? stdoutColor.level : 0;
|
||||
object.level = options.level === undefined ? colorLevel : options.level;
|
||||
};
|
||||
|
||||
class ChalkClass {
|
||||
constructor(options) {
|
||||
// eslint-disable-next-line no-constructor-return
|
||||
return chalkFactory(options);
|
||||
}
|
||||
}
|
||||
|
||||
const chalkFactory = options => {
|
||||
const chalk = {};
|
||||
applyOptions(chalk, options);
|
||||
|
||||
chalk.template = (...arguments_) => chalkTag(chalk.template, ...arguments_);
|
||||
|
||||
Object.setPrototypeOf(chalk, Chalk.prototype);
|
||||
Object.setPrototypeOf(chalk.template, chalk);
|
||||
|
||||
chalk.template.constructor = () => {
|
||||
throw new Error('`chalk.constructor()` is deprecated. Use `new chalk.Instance()` instead.');
|
||||
};
|
||||
|
||||
chalk.template.Instance = ChalkClass;
|
||||
|
||||
return chalk.template;
|
||||
};
|
||||
|
||||
function Chalk(options) {
|
||||
return chalkFactory(options);
|
||||
}
|
||||
|
||||
for (const [styleName, style] of Object.entries(ansiStyles)) {
|
||||
styles[styleName] = {
|
||||
get() {
|
||||
const builder = createBuilder(this, createStyler(style.open, style.close, this._styler), this._isEmpty);
|
||||
Object.defineProperty(this, styleName, {value: builder});
|
||||
return builder;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
styles.visible = {
|
||||
get() {
|
||||
const builder = createBuilder(this, this._styler, true);
|
||||
Object.defineProperty(this, 'visible', {value: builder});
|
||||
return builder;
|
||||
}
|
||||
};
|
||||
|
||||
const usedModels = ['rgb', 'hex', 'keyword', 'hsl', 'hsv', 'hwb', 'ansi', 'ansi256'];
|
||||
|
||||
for (const model of usedModels) {
|
||||
styles[model] = {
|
||||
get() {
|
||||
const {level} = this;
|
||||
return function (...arguments_) {
|
||||
const styler = createStyler(ansiStyles.color[levelMapping[level]][model](...arguments_), ansiStyles.color.close, this._styler);
|
||||
return createBuilder(this, styler, this._isEmpty);
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
for (const model of usedModels) {
|
||||
const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
|
||||
styles[bgModel] = {
|
||||
get() {
|
||||
const {level} = this;
|
||||
return function (...arguments_) {
|
||||
const styler = createStyler(ansiStyles.bgColor[levelMapping[level]][model](...arguments_), ansiStyles.bgColor.close, this._styler);
|
||||
return createBuilder(this, styler, this._isEmpty);
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const proto = Object.defineProperties(() => {}, {
|
||||
...styles,
|
||||
level: {
|
||||
enumerable: true,
|
||||
get() {
|
||||
return this._generator.level;
|
||||
},
|
||||
set(level) {
|
||||
this._generator.level = level;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const createStyler = (open, close, parent) => {
|
||||
let openAll;
|
||||
let closeAll;
|
||||
if (parent === undefined) {
|
||||
openAll = open;
|
||||
closeAll = close;
|
||||
} else {
|
||||
openAll = parent.openAll + open;
|
||||
closeAll = close + parent.closeAll;
|
||||
}
|
||||
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
openAll,
|
||||
closeAll,
|
||||
parent
|
||||
};
|
||||
};
|
||||
|
||||
const createBuilder = (self, _styler, _isEmpty) => {
|
||||
const builder = (...arguments_) => {
|
||||
if (isArray(arguments_[0]) && isArray(arguments_[0].raw)) {
|
||||
// Called as a template literal, for example: chalk.red`2 + 3 = {bold ${2+3}}`
|
||||
return applyStyle(builder, chalkTag(builder, ...arguments_));
|
||||
}
|
||||
|
||||
// Single argument is hot path, implicit coercion is faster than anything
|
||||
// eslint-disable-next-line no-implicit-coercion
|
||||
return applyStyle(builder, (arguments_.length === 1) ? ('' + arguments_[0]) : arguments_.join(' '));
|
||||
};
|
||||
|
||||
// We alter the prototype because we must return a function, but there is
|
||||
// no way to create a function with a different prototype
|
||||
Object.setPrototypeOf(builder, proto);
|
||||
|
||||
builder._generator = self;
|
||||
builder._styler = _styler;
|
||||
builder._isEmpty = _isEmpty;
|
||||
|
||||
return builder;
|
||||
};
|
||||
|
||||
const applyStyle = (self, string) => {
|
||||
if (self.level <= 0 || !string) {
|
||||
return self._isEmpty ? '' : string;
|
||||
}
|
||||
|
||||
let styler = self._styler;
|
||||
|
||||
if (styler === undefined) {
|
||||
return string;
|
||||
}
|
||||
|
||||
const {openAll, closeAll} = styler;
|
||||
if (string.indexOf('\u001B') !== -1) {
|
||||
while (styler !== undefined) {
|
||||
// Replace any instances already present with a re-opening code
|
||||
// otherwise only the part of the string until said closing code
|
||||
// will be colored, and the rest will simply be 'plain'.
|
||||
string = stringReplaceAll(string, styler.close, styler.open);
|
||||
|
||||
styler = styler.parent;
|
||||
}
|
||||
}
|
||||
|
||||
// We can move both next actions out of loop, because remaining actions in loop won't have
|
||||
// any/visible effect on parts we add here. Close the styling before a linebreak and reopen
|
||||
// after next line to fix a bleed issue on macOS: https://github.com/chalk/chalk/pull/92
|
||||
const lfIndex = string.indexOf('\n');
|
||||
if (lfIndex !== -1) {
|
||||
string = stringEncaseCRLFWithFirstIndex(string, closeAll, openAll, lfIndex);
|
||||
}
|
||||
|
||||
return openAll + string + closeAll;
|
||||
};
|
||||
|
||||
let template;
|
||||
const chalkTag = (chalk, ...strings) => {
|
||||
const [firstString] = strings;
|
||||
|
||||
if (!isArray(firstString) || !isArray(firstString.raw)) {
|
||||
// If chalk() was called by itself or with a string,
|
||||
// return the string itself as a string.
|
||||
return strings.join(' ');
|
||||
}
|
||||
|
||||
const arguments_ = strings.slice(1);
|
||||
const parts = [firstString.raw[0]];
|
||||
|
||||
for (let i = 1; i < firstString.length; i++) {
|
||||
parts.push(
|
||||
String(arguments_[i - 1]).replace(/[{}\\]/g, '\\$&'),
|
||||
String(firstString.raw[i])
|
||||
);
|
||||
}
|
||||
|
||||
if (template === undefined) {
|
||||
template = require('./templates');
|
||||
}
|
||||
|
||||
return template(chalk, parts.join(''));
|
||||
};
|
||||
|
||||
Object.defineProperties(Chalk.prototype, styles);
|
||||
|
||||
const chalk = Chalk(); // eslint-disable-line new-cap
|
||||
chalk.supportsColor = stdoutColor;
|
||||
chalk.stderr = Chalk({level: stderrColor ? stderrColor.level : 0}); // eslint-disable-line new-cap
|
||||
chalk.stderr.supportsColor = stderrColor;
|
||||
|
||||
module.exports = chalk;
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
'use strict';
|
||||
const TEMPLATE_REGEX = /(?:\\(u(?:[a-f\d]{4}|\{[a-f\d]{1,6}\})|x[a-f\d]{2}|.))|(?:\{(~)?(\w+(?:\([^)]*\))?(?:\.\w+(?:\([^)]*\))?)*)(?:[ \t]|(?=\r?\n)))|(\})|((?:.|[\r\n\f])+?)/gi;
|
||||
const STYLE_REGEX = /(?:^|\.)(\w+)(?:\(([^)]*)\))?/g;
|
||||
const STRING_REGEX = /^(['"])((?:\\.|(?!\1)[^\\])*)\1$/;
|
||||
const ESCAPE_REGEX = /\\(u(?:[a-f\d]{4}|{[a-f\d]{1,6}})|x[a-f\d]{2}|.)|([^\\])/gi;
|
||||
|
||||
const ESCAPES = new Map([
|
||||
['n', '\n'],
|
||||
['r', '\r'],
|
||||
['t', '\t'],
|
||||
['b', '\b'],
|
||||
['f', '\f'],
|
||||
['v', '\v'],
|
||||
['0', '\0'],
|
||||
['\\', '\\'],
|
||||
['e', '\u001B'],
|
||||
['a', '\u0007']
|
||||
]);
|
||||
|
||||
function unescape(c) {
|
||||
const u = c[0] === 'u';
|
||||
const bracket = c[1] === '{';
|
||||
|
||||
if ((u && !bracket && c.length === 5) || (c[0] === 'x' && c.length === 3)) {
|
||||
return String.fromCharCode(parseInt(c.slice(1), 16));
|
||||
}
|
||||
|
||||
if (u && bracket) {
|
||||
return String.fromCodePoint(parseInt(c.slice(2, -1), 16));
|
||||
}
|
||||
|
||||
return ESCAPES.get(c) || c;
|
||||
}
|
||||
|
||||
function parseArguments(name, arguments_) {
|
||||
const results = [];
|
||||
const chunks = arguments_.trim().split(/\s*,\s*/g);
|
||||
let matches;
|
||||
|
||||
for (const chunk of chunks) {
|
||||
const number = Number(chunk);
|
||||
if (!Number.isNaN(number)) {
|
||||
results.push(number);
|
||||
} else if ((matches = chunk.match(STRING_REGEX))) {
|
||||
results.push(matches[2].replace(ESCAPE_REGEX, (m, escape, character) => escape ? unescape(escape) : character));
|
||||
} else {
|
||||
throw new Error(`Invalid Chalk template style argument: ${chunk} (in style '${name}')`);
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
function parseStyle(style) {
|
||||
STYLE_REGEX.lastIndex = 0;
|
||||
|
||||
const results = [];
|
||||
let matches;
|
||||
|
||||
while ((matches = STYLE_REGEX.exec(style)) !== null) {
|
||||
const name = matches[1];
|
||||
|
||||
if (matches[2]) {
|
||||
const args = parseArguments(name, matches[2]);
|
||||
results.push([name].concat(args));
|
||||
} else {
|
||||
results.push([name]);
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
function buildStyle(chalk, styles) {
|
||||
const enabled = {};
|
||||
|
||||
for (const layer of styles) {
|
||||
for (const style of layer.styles) {
|
||||
enabled[style[0]] = layer.inverse ? null : style.slice(1);
|
||||
}
|
||||
}
|
||||
|
||||
let current = chalk;
|
||||
for (const [styleName, styles] of Object.entries(enabled)) {
|
||||
if (!Array.isArray(styles)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!(styleName in current)) {
|
||||
throw new Error(`Unknown Chalk style: ${styleName}`);
|
||||
}
|
||||
|
||||
current = styles.length > 0 ? current[styleName](...styles) : current[styleName];
|
||||
}
|
||||
|
||||
return current;
|
||||
}
|
||||
|
||||
module.exports = (chalk, temporary) => {
|
||||
const styles = [];
|
||||
const chunks = [];
|
||||
let chunk = [];
|
||||
|
||||
// eslint-disable-next-line max-params
|
||||
temporary.replace(TEMPLATE_REGEX, (m, escapeCharacter, inverse, style, close, character) => {
|
||||
if (escapeCharacter) {
|
||||
chunk.push(unescape(escapeCharacter));
|
||||
} else if (style) {
|
||||
const string = chunk.join('');
|
||||
chunk = [];
|
||||
chunks.push(styles.length === 0 ? string : buildStyle(chalk, styles)(string));
|
||||
styles.push({inverse, styles: parseStyle(style)});
|
||||
} else if (close) {
|
||||
if (styles.length === 0) {
|
||||
throw new Error('Found extraneous } in Chalk template literal');
|
||||
}
|
||||
|
||||
chunks.push(buildStyle(chalk, styles)(chunk.join('')));
|
||||
chunk = [];
|
||||
styles.pop();
|
||||
} else {
|
||||
chunk.push(character);
|
||||
}
|
||||
});
|
||||
|
||||
chunks.push(chunk.join(''));
|
||||
|
||||
if (styles.length > 0) {
|
||||
const errMessage = `Chalk template literal is missing ${styles.length} closing bracket${styles.length === 1 ? '' : 's'} (\`}\`)`;
|
||||
throw new Error(errMessage);
|
||||
}
|
||||
|
||||
return chunks.join('');
|
||||
};
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const stringReplaceAll = (string, substring, replacer) => {
|
||||
let index = string.indexOf(substring);
|
||||
if (index === -1) {
|
||||
return string;
|
||||
}
|
||||
|
||||
const substringLength = substring.length;
|
||||
let endIndex = 0;
|
||||
let returnValue = '';
|
||||
do {
|
||||
returnValue += string.substr(endIndex, index - endIndex) + substring + replacer;
|
||||
endIndex = index + substringLength;
|
||||
index = string.indexOf(substring, endIndex);
|
||||
} while (index !== -1);
|
||||
|
||||
returnValue += string.substr(endIndex);
|
||||
return returnValue;
|
||||
};
|
||||
|
||||
const stringEncaseCRLFWithFirstIndex = (string, prefix, postfix, index) => {
|
||||
let endIndex = 0;
|
||||
let returnValue = '';
|
||||
do {
|
||||
const gotCR = string[index - 1] === '\r';
|
||||
returnValue += string.substr(endIndex, (gotCR ? index - 1 : index) - endIndex) + prefix + (gotCR ? '\r\n' : '\n') + postfix;
|
||||
endIndex = index + 1;
|
||||
index = string.indexOf('\n', endIndex);
|
||||
} while (index !== -1);
|
||||
|
||||
returnValue += string.substr(endIndex);
|
||||
return returnValue;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
stringReplaceAll,
|
||||
stringEncaseCRLFWithFirstIndex
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
'use strict';
|
||||
module.exports = {
|
||||
stdout: false,
|
||||
stderr: false
|
||||
};
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
'use strict';
|
||||
const os = require('os');
|
||||
const tty = require('tty');
|
||||
const hasFlag = require('has-flag');
|
||||
|
||||
const {env} = process;
|
||||
|
||||
let forceColor;
|
||||
if (hasFlag('no-color') ||
|
||||
hasFlag('no-colors') ||
|
||||
hasFlag('color=false') ||
|
||||
hasFlag('color=never')) {
|
||||
forceColor = 0;
|
||||
} else if (hasFlag('color') ||
|
||||
hasFlag('colors') ||
|
||||
hasFlag('color=true') ||
|
||||
hasFlag('color=always')) {
|
||||
forceColor = 1;
|
||||
}
|
||||
|
||||
if ('FORCE_COLOR' in env) {
|
||||
if (env.FORCE_COLOR === 'true') {
|
||||
forceColor = 1;
|
||||
} else if (env.FORCE_COLOR === 'false') {
|
||||
forceColor = 0;
|
||||
} else {
|
||||
forceColor = env.FORCE_COLOR.length === 0 ? 1 : Math.min(parseInt(env.FORCE_COLOR, 10), 3);
|
||||
}
|
||||
}
|
||||
|
||||
function translateLevel(level) {
|
||||
if (level === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
level,
|
||||
hasBasic: true,
|
||||
has256: level >= 2,
|
||||
has16m: level >= 3
|
||||
};
|
||||
}
|
||||
|
||||
function supportsColor(haveStream, streamIsTTY) {
|
||||
if (forceColor === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (hasFlag('color=16m') ||
|
||||
hasFlag('color=full') ||
|
||||
hasFlag('color=truecolor')) {
|
||||
return 3;
|
||||
}
|
||||
|
||||
if (hasFlag('color=256')) {
|
||||
return 2;
|
||||
}
|
||||
|
||||
if (haveStream && !streamIsTTY && forceColor === undefined) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const min = forceColor || 0;
|
||||
|
||||
if (env.TERM === 'dumb') {
|
||||
return min;
|
||||
}
|
||||
|
||||
if (process.platform === 'win32') {
|
||||
// Windows 10 build 10586 is the first Windows release that supports 256 colors.
|
||||
// Windows 10 build 14931 is the first release that supports 16m/TrueColor.
|
||||
const osRelease = os.release().split('.');
|
||||
if (
|
||||
Number(osRelease[0]) >= 10 &&
|
||||
Number(osRelease[2]) >= 10586
|
||||
) {
|
||||
return Number(osRelease[2]) >= 14931 ? 3 : 2;
|
||||
}
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
if ('CI' in env) {
|
||||
if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI', 'GITHUB_ACTIONS', 'BUILDKITE'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return min;
|
||||
}
|
||||
|
||||
if ('TEAMCITY_VERSION' in env) {
|
||||
return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
|
||||
}
|
||||
|
||||
if (env.COLORTERM === 'truecolor') {
|
||||
return 3;
|
||||
}
|
||||
|
||||
if ('TERM_PROGRAM' in env) {
|
||||
const version = parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
|
||||
|
||||
switch (env.TERM_PROGRAM) {
|
||||
case 'iTerm.app':
|
||||
return version >= 3 ? 3 : 2;
|
||||
case 'Apple_Terminal':
|
||||
return 2;
|
||||
// No default
|
||||
}
|
||||
}
|
||||
|
||||
if (/-256(color)?$/i.test(env.TERM)) {
|
||||
return 2;
|
||||
}
|
||||
|
||||
if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if ('COLORTERM' in env) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return min;
|
||||
}
|
||||
|
||||
function getSupportLevel(stream) {
|
||||
const level = supportsColor(stream, stream && stream.isTTY);
|
||||
return translateLevel(level);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
supportsColor: getSupportLevel,
|
||||
stdout: translateLevel(supportsColor(true, tty.isatty(1))),
|
||||
stderr: translateLevel(supportsColor(true, tty.isatty(2)))
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
{
|
||||
"name": "supports-color",
|
||||
"version": "7.2.0",
|
||||
"description": "Detect whether a terminal supports color",
|
||||
"license": "MIT",
|
||||
"repository": "chalk/supports-color",
|
||||
"author": {
|
||||
"name": "Sindre Sorhus",
|
||||
"email": "sindresorhus@gmail.com",
|
||||
"url": "sindresorhus.com"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "xo && ava"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"browser.js"
|
||||
],
|
||||
"keywords": [
|
||||
"color",
|
||||
"colour",
|
||||
"colors",
|
||||
"terminal",
|
||||
"console",
|
||||
"cli",
|
||||
"ansi",
|
||||
"styles",
|
||||
"tty",
|
||||
"rgb",
|
||||
"256",
|
||||
"shell",
|
||||
"xterm",
|
||||
"command-line",
|
||||
"support",
|
||||
"supports",
|
||||
"capability",
|
||||
"detect",
|
||||
"truecolor",
|
||||
"16m"
|
||||
],
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"ava": "^1.4.1",
|
||||
"import-fresh": "^3.0.0",
|
||||
"xo": "^0.24.0"
|
||||
},
|
||||
"browser": "browser.js"
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
# supports-color [](https://travis-ci.org/chalk/supports-color)
|
||||
|
||||
> Detect whether a terminal supports color
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
$ npm install supports-color
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
const supportsColor = require('supports-color');
|
||||
|
||||
if (supportsColor.stdout) {
|
||||
console.log('Terminal stdout supports color');
|
||||
}
|
||||
|
||||
if (supportsColor.stdout.has256) {
|
||||
console.log('Terminal stdout supports 256 colors');
|
||||
}
|
||||
|
||||
if (supportsColor.stderr.has16m) {
|
||||
console.log('Terminal stderr supports 16 million colors (truecolor)');
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Returns an `Object` with a `stdout` and `stderr` property for testing either streams. Each property is an `Object`, or `false` if color is not supported.
|
||||
|
||||
The `stdout`/`stderr` objects specifies a level of support for color through a `.level` property and a corresponding flag:
|
||||
|
||||
- `.level = 1` and `.hasBasic = true`: Basic color support (16 colors)
|
||||
- `.level = 2` and `.has256 = true`: 256 color support
|
||||
- `.level = 3` and `.has16m = true`: Truecolor support (16 million colors)
|
||||
|
||||
|
||||
## Info
|
||||
|
||||
It obeys the `--color` and `--no-color` CLI flags.
|
||||
|
||||
For situations where using `--color` is not possible, use the environment variable `FORCE_COLOR=1` (level 1), `FORCE_COLOR=2` (level 2), or `FORCE_COLOR=3` (level 3) to forcefully enable color, or `FORCE_COLOR=0` to forcefully disable. The use of `FORCE_COLOR` overrides all other color support checks.
|
||||
|
||||
Explicit 256/Truecolor mode can be enabled using the `--color=256` and `--color=16m` flags, respectively.
|
||||
|
||||
|
||||
## Related
|
||||
|
||||
- [supports-color-cli](https://github.com/chalk/supports-color-cli) - CLI for this module
|
||||
- [chalk](https://github.com/chalk/chalk) - Terminal string styling done right
|
||||
|
||||
|
||||
## Maintainers
|
||||
|
||||
- [Sindre Sorhus](https://github.com/sindresorhus)
|
||||
- [Josh Junon](https://github.com/qix-)
|
||||
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
<b>
|
||||
<a href="https://tidelift.com/subscription/pkg/npm-supports-color?utm_source=npm-supports-color&utm_medium=referral&utm_campaign=readme">Get professional support for this package with a Tidelift subscription</a>
|
||||
</b>
|
||||
<br>
|
||||
<sub>
|
||||
Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
|
||||
</sub>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { type BaseComponentProps, type TemplateResult } from "./mini.js";
|
||||
export type AlertVariant = "default" | "destructive";
|
||||
export interface AlertProps extends BaseComponentProps {
|
||||
variant?: AlertVariant;
|
||||
}
|
||||
export declare function Alert(props: AlertProps): TemplateResult;
|
||||
export declare function Alert(children: TemplateResult | string, variant?: AlertVariant, className?: string): TemplateResult;
|
||||
export declare function AlertTitle(props: BaseComponentProps): TemplateResult;
|
||||
export declare function AlertTitle(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function AlertDescription(props: BaseComponentProps): TemplateResult;
|
||||
export declare function AlertDescription(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
//# sourceMappingURL=Alert.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../src/Alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEnF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAErD,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACnD,OAAO,CAAC,EAAE,YAAY,CAAC;CACzB;AAwBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAAC;AACzD,wBAAgB,KAAK,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAYrH,wBAAgB,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACtE,wBAAgB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWlG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AAC5E,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC"}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { fc, html } from "./mini.js";
|
||||
// Internal FC components with named args
|
||||
const _Alert = fc(({ variant = "default", className = "", children }) => {
|
||||
const variantClasses = {
|
||||
default: "bg-background text-foreground border-border",
|
||||
destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
};
|
||||
const baseClasses = "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground";
|
||||
return html ` <div class="${baseClasses} ${variantClasses[variant]} ${className}" role="alert">${children}</div> `;
|
||||
});
|
||||
const _AlertTitle = fc(({ className = "", children }) => {
|
||||
return html ` <h5 class="mb-1 font-medium leading-none tracking-tight ${className}">${children}</h5> `;
|
||||
});
|
||||
const _AlertDescription = fc(({ className = "", children }) => {
|
||||
return html ` <div class="text-sm [&_p]:leading-relaxed ${className}">${children}</div> `;
|
||||
});
|
||||
export function Alert(propsOrChildren, variant = "default", className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _Alert(propsOrChildren);
|
||||
}
|
||||
return _Alert({ children: propsOrChildren, variant, className });
|
||||
}
|
||||
export function AlertTitle(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _AlertTitle(propsOrChildren);
|
||||
}
|
||||
return _AlertTitle({ children: propsOrChildren, className });
|
||||
}
|
||||
export function AlertDescription(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _AlertDescription(propsOrChildren);
|
||||
}
|
||||
return _AlertDescription({ children: propsOrChildren, className });
|
||||
}
|
||||
//# sourceMappingURL=Alert.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../src/Alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAuB,MAAM,WAAW,CAAC;AAQnF,yCAAyC;AACzC,MAAM,MAAM,GAAG,EAAE,CAAa,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG;QACpB,OAAO,EAAE,6CAA6C;QACtD,WAAW,EAAE,yFAAyF;KACxG,CAAC;IAEF,MAAM,WAAW,GACd,2JAA2J,CAAC;IAE/J,OAAO,IAAI,CAAA,gBAAgB,WAAW,IAAI,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,kBAAkB,QAAQ,SAAS,CAAC;AACrH,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,EAAE,CAAqB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzE,OAAO,IAAI,CAAA,4DAA4D,SAAS,KAAK,QAAQ,QAAQ,CAAC;AACzG,CAAC,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,EAAE,CAAqB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/E,OAAO,IAAI,CAAA,8CAA8C,SAAS,KAAK,QAAQ,SAAS,CAAC;AAC5F,CAAC,CAAC,CAAC;AAKH,MAAM,UAAU,KAAK,CAClB,eAAqD,EACrD,UAAwB,SAAS,EACjC,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,eAAe,KAAK,QAAQ,IAAI,eAAe,KAAK,IAAI,IAAI,UAAU,IAAI,eAAe,EAAE,CAAC;QACpG,OAAO,MAAM,CAAC,eAA6B,CAAC,CAAC;IAChD,CAAC;IACD,OAAO,MAAM,CAAC,EAAE,QAAQ,EAAE,eAA0C,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC/F,CAAC;AAID,MAAM,UAAU,UAAU,CACvB,eAA6D,EAC7D,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,eAAe,KAAK,QAAQ,IAAI,eAAe,KAAK,IAAI,IAAI,UAAU,IAAI,eAAe,EAAE,CAAC;QACpG,OAAO,WAAW,CAAC,eAAqC,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,WAAW,CAAC,EAAE,QAAQ,EAAE,eAA0C,EAAE,SAAS,EAAE,CAAC,CAAC;AAC3F,CAAC;AAID,MAAM,UAAU,gBAAgB,CAC7B,eAA6D,EAC7D,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,eAAe,KAAK,QAAQ,IAAI,eAAe,KAAK,IAAI,IAAI,UAAU,IAAI,eAAe,EAAE,CAAC;QACpG,OAAO,iBAAiB,CAAC,eAAqC,CAAC,CAAC;IACnE,CAAC;IACD,OAAO,iBAAiB,CAAC,EAAE,QAAQ,EAAE,eAA0C,EAAE,SAAS,EAAE,CAAC,CAAC;AACjG,CAAC"}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { type BaseComponentProps, type TemplateResult } from "./mini.js";
|
||||
export type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
|
||||
export interface BadgeProps extends BaseComponentProps {
|
||||
variant?: BadgeVariant;
|
||||
}
|
||||
export declare function Badge(props: BadgeProps): TemplateResult;
|
||||
export declare function Badge(children: TemplateResult | string, variant?: BadgeVariant, className?: string): TemplateResult;
|
||||
//# sourceMappingURL=Badge.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEnF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;AAE/E,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACnD,OAAO,CAAC,EAAE,YAAY,CAAC;CACzB;AAkBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAAC;AACzD,wBAAgB,KAAK,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC"}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { fc, html } from "./mini.js";
|
||||
// Internal FC component with named args
|
||||
const _Badge = fc(({ variant = "default", className = "", children }) => {
|
||||
const variantClasses = {
|
||||
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "border-input text-foreground",
|
||||
};
|
||||
const baseClasses = "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden";
|
||||
return html ` <span class="${baseClasses} ${variantClasses[variant]} ${className}"> ${children} </span> `;
|
||||
});
|
||||
export function Badge(propsOrChildren, variant = "default", className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _Badge(propsOrChildren);
|
||||
}
|
||||
return _Badge({ children: propsOrChildren, variant, className });
|
||||
}
|
||||
//# sourceMappingURL=Badge.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAuB,MAAM,WAAW,CAAC;AAQnF,wCAAwC;AACxC,MAAM,MAAM,GAAG,EAAE,CAAa,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjF,MAAM,cAAc,GAAG;QACpB,OAAO,EAAE,2EAA2E;QACpF,SAAS,EAAE,iFAAiF;QAC5F,WAAW,EAAE,uFAAuF;QACpG,OAAO,EAAE,8BAA8B;KACzC,CAAC;IAEF,MAAM,WAAW,GACd,gZAAgZ,CAAC;IAEpZ,OAAO,IAAI,CAAA,iBAAiB,WAAW,IAAI,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,MAAM,QAAQ,WAAW,CAAC;AAC5G,CAAC,CAAC,CAAC;AAKH,MAAM,UAAU,KAAK,CAClB,eAAqD,EACrD,UAAwB,SAAS,EACjC,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,eAAe,KAAK,QAAQ,IAAI,eAAe,KAAK,IAAI,IAAI,UAAU,IAAI,eAAe,EAAE,CAAC;QACpG,OAAO,MAAM,CAAC,eAA6B,CAAC,CAAC;IAChD,CAAC;IACD,OAAO,MAAM,CAAC,EAAE,QAAQ,EAAE,eAA0C,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC/F,CAAC"}
|
||||
|
|
@ -1,474 +0,0 @@
|
|||
import { ComponentLitBase, type ExtractProps, type ExtractPropsForClass } from "./component.js";
|
||||
export declare const buttonDefinition: Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
export declare const buttonDefaultStyle: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
export declare const renderButton: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
export declare function createButton(styles: typeof buttonDefaultStyle): import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export declare const Button: import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export type ButtonProps = ExtractProps<typeof buttonDefinition>;
|
||||
export type ButtonPropsForClass = ExtractPropsForClass<typeof buttonDefinition>;
|
||||
export type ButtonStyles = typeof buttonDefaultStyle;
|
||||
export declare class MiniButton extends ComponentLitBase<typeof buttonDefinition> implements ButtonPropsForClass {
|
||||
variant?: ButtonProps["variant"];
|
||||
size?: ButtonProps["size"];
|
||||
disabled: ButtonProps["disabled"];
|
||||
loading: ButtonProps["loading"];
|
||||
onClick: ButtonProps["onClick"];
|
||||
protected definition: Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
protected styles: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
protected renderFn: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
connectedCallback(): void;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"mini-button": MiniButton;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=Button.cva.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.cva.d.ts","sourceRoot":"","sources":["../src/Button.cva.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { Loader2 } from "lucide";
|
||||
import { ComponentLitBase, createComponent, defineComponent, renderComponent, styleComponent, } from "./component.js";
|
||||
import { icon } from "./icons.js";
|
||||
// Step 1: Define the component structure
|
||||
export const buttonDefinition = defineComponent({
|
||||
tag: "mini-button",
|
||||
variants: {
|
||||
variant: {
|
||||
options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
|
||||
default: "default",
|
||||
description: "Visual style of the button",
|
||||
},
|
||||
size: {
|
||||
options: ["default", "sm", "lg", "icon"],
|
||||
default: "default",
|
||||
description: "Size of the button",
|
||||
},
|
||||
},
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Disables the button when true",
|
||||
},
|
||||
loading: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Shows loading spinner when true",
|
||||
},
|
||||
onClick: {
|
||||
type: "function",
|
||||
default: undefined,
|
||||
description: "Click event handler",
|
||||
},
|
||||
},
|
||||
});
|
||||
// Step 2: Define styles - definition passed for type inference only
|
||||
export const buttonDefaultStyle = styleComponent(buttonDefinition, {
|
||||
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
variant: "ghost",
|
||||
size: "icon",
|
||||
className: "hover:bg-accent/50",
|
||||
},
|
||||
{
|
||||
variant: "link",
|
||||
size: "sm",
|
||||
className: "h-auto px-0 py-0",
|
||||
},
|
||||
],
|
||||
});
|
||||
// Step 3: Define render function - now receives className function for single-element component
|
||||
export const renderButton = renderComponent(buttonDefinition, buttonDefaultStyle, (props, className) => {
|
||||
const { size, disabled, loading, onClick, children } = props;
|
||||
return html `
|
||||
<button
|
||||
class=${className()}
|
||||
?disabled=${disabled || loading}
|
||||
@click=${onClick}
|
||||
>
|
||||
${loading
|
||||
? html `<span class="animate-spin">${icon(Loader2, size === "icon" || size === "sm" ? "sm" : "md")}</span>`
|
||||
: ""}
|
||||
${children}
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
// Step 4: Create button factory
|
||||
export function createButton(styles) {
|
||||
return createComponent(buttonDefinition, styles, renderButton);
|
||||
}
|
||||
// Default functional button export
|
||||
export const Button = createButton(buttonDefaultStyle);
|
||||
// Concerete class-based button export
|
||||
let MiniButton = class MiniButton extends ComponentLitBase {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.disabled = buttonDefinition.props.disabled.default;
|
||||
this.loading = buttonDefinition.props.loading.default;
|
||||
this.onClick = buttonDefinition.props.onClick.default;
|
||||
// Provide definition, styles, and render function
|
||||
this.definition = buttonDefinition;
|
||||
this.styles = buttonDefaultStyle;
|
||||
this.renderFn = renderButton;
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!this.style.display) {
|
||||
this.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniButton.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniButton.prototype, "size", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniButton.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniButton.prototype, "loading", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false })
|
||||
], MiniButton.prototype, "onClick", void 0);
|
||||
MiniButton = __decorate([
|
||||
customElement(buttonDefinition.tag)
|
||||
], MiniButton);
|
||||
export { MiniButton };
|
||||
//# sourceMappingURL=Button.cva.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.cva.js","sourceRoot":"","sources":["../src/Button.cva.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { type BaseComponentProps } from "./mini.js";
|
||||
export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
||||
export type ButtonSize = "sm" | "md" | "lg" | "icon";
|
||||
export interface ButtonProps extends BaseComponentProps {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
disabled?: boolean;
|
||||
type?: "button" | "submit" | "reset";
|
||||
loading?: boolean;
|
||||
onClick?: (e: Event) => void;
|
||||
title?: string;
|
||||
}
|
||||
export declare const Button: import("./mini.js").Component<ButtonProps>;
|
||||
//# sourceMappingURL=Button.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACpD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,4CA8ElB,CAAC"}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { fc, html } from "./mini.js";
|
||||
export const Button = fc(({ variant = "default", size = "md", disabled = false, type = "button", loading = false, onClick, title, className = "", children, }) => {
|
||||
const sizeClasses = {
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
md: "h-9 rounded-md px-4 text-sm",
|
||||
lg: "h-10 rounded-md px-8 text-sm",
|
||||
icon: "size-8 rounded-md",
|
||||
};
|
||||
const variantClasses = {
|
||||
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
};
|
||||
const baseClasses = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
|
||||
const gapClass = size === "icon" ? "" : "gap-2";
|
||||
const paddingAdjustClass = size === "icon" ? "" : "has-[>svg]:px-2.5";
|
||||
const variantClass = variantClasses[variant] || variantClasses.default;
|
||||
const handleClick = (e) => {
|
||||
if (disabled || loading) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
onClick?.(e);
|
||||
};
|
||||
return html `
|
||||
<button
|
||||
type="${type}"
|
||||
class="${baseClasses} ${sizeClasses[size]} ${variantClass} ${gapClass} ${paddingAdjustClass} ${className}"
|
||||
?disabled=${disabled || loading}
|
||||
@click=${handleClick}
|
||||
title="${title || ""}"
|
||||
>
|
||||
${loading
|
||||
? html `
|
||||
<svg class="animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
`
|
||||
: ""}
|
||||
${children}
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
//# sourceMappingURL=Button.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAe9D,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CACrB,CAAC,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,OAAO,EACP,KAAK,EACL,SAAS,GAAG,EAAE,EACd,QAAQ,GACV,EAAE,EAAE;IACF,MAAM,WAAW,GAAG;QACjB,EAAE,EAAE,6BAA6B;QACjC,EAAE,EAAE,6BAA6B;QACjC,EAAE,EAAE,8BAA8B;QAClC,IAAI,EAAE,mBAAmB;KAC3B,CAAC;IAEF,MAAM,cAAc,GAAG;QACpB,OAAO,EAAE,kEAAkE;QAC3E,WAAW,EAAE,8EAA8E;QAC3F,OAAO,EACJ,0GAA0G;QAC7G,SAAS,EAAE,wEAAwE;QACnF,KAAK,EAAE,8DAA8D;QACrE,IAAI,EAAE,iDAAiD;KACzD,CAAC;IAEF,MAAM,WAAW,GACd,udAAud,CAAC;IAE3d,MAAM,QAAQ,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,kBAAkB,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC;IACtE,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC9B,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACV,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;oBAEG,IAAI;qBACH,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,YAAY,IAAI,QAAQ,IAAI,kBAAkB,IAAI,SAAS;wBAC5F,QAAQ,IAAI,OAAO;qBACtB,WAAW;qBACX,KAAK,IAAI,EAAE;;cAGjB,OAAO;QACJ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;kBAgBN;QACA,CAAC,CAAC,EACR;cACE,QAAQ;;OAEf,CAAC;AACL,CAAC,CACH,CAAC"}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
import { LitElement, type TemplateResult } from 'lit';
|
||||
import { type VariantProps } from 'tailwind-variants';
|
||||
export declare function description(text: string): (target: any, propertyKey: string) => void;
|
||||
export declare function control(type: 'select' | 'toggle' | 'text', options?: readonly string[]): (target: any, propertyKey: string) => void;
|
||||
export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, import("tailwind-variants").TVReturnType<{
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
|
||||
export type ButtonStyles = typeof buttonStyles;
|
||||
export type ButtonVariants = VariantProps<ButtonStyles>;
|
||||
export declare class MiniButton extends LitElement {
|
||||
static defaultStyles: import("tailwind-variants").TVReturnType<{
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, import("tailwind-variants").TVReturnType<{
|
||||
variant: {
|
||||
default: string;
|
||||
destructive: string;
|
||||
outline: string;
|
||||
secondary: string;
|
||||
ghost: string;
|
||||
link: string;
|
||||
};
|
||||
size: {
|
||||
default: string;
|
||||
sm: string;
|
||||
lg: string;
|
||||
icon: string;
|
||||
};
|
||||
}, undefined, "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
|
||||
static getMetadata(): any;
|
||||
variant: ButtonVariants['variant'];
|
||||
size: ButtonVariants['size'];
|
||||
disabled: boolean;
|
||||
loading: boolean;
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
styles: typeof buttonStyles;
|
||||
static template(props: Partial<MiniButton>, styles?: typeof buttonStyles): TemplateResult;
|
||||
createRenderRoot(): this;
|
||||
connectedCallback(): void;
|
||||
render(): TemplateResult;
|
||||
}
|
||||
export type ButtonProps = Partial<Omit<MiniButton, keyof LitElement | 'styles'>>;
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mini-button': MiniButton;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=Button.next.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.next.d.ts","sourceRoot":"","sources":["../src/Button.next.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAW1D,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,IAC9B,QAAQ,GAAG,EAAE,aAAa,MAAM,UAKzC;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,IAC7E,QAAQ,GAAG,EAAE,aAAa,MAAM,UAKzC;AAMD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2UAsBvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;AAMxD,qBACa,UAAW,SAAQ,UAAU;IAExC,MAAM,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gVAAgB;IAGpC,MAAM,CAAC,WAAW;IAQlB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAa;IAK/C,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAa;IAMzC,QAAQ,UAAS;IAKjB,OAAO,UAAS;IAIhB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAIlC,MAAM,EAAE,OAAO,YAAY,CAA4B;IAGvD,MAAM,CAAC,QAAQ,CACb,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,EAC1B,MAAM,GAAE,OAAO,YAAuC,GACrD,cAAc;IAuBjB,gBAAgB;IAIhB,iBAAiB;IAOjB,MAAM;CAIP;AAMD,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEjF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var MiniButton_1;
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { tv } from 'tailwind-variants';
|
||||
import { icon } from './icons.js';
|
||||
import { Loader2 } from 'lucide';
|
||||
// ============================================================================
|
||||
// Metadata Decorators
|
||||
// ============================================================================
|
||||
// Store component metadata
|
||||
const componentMetadata = new WeakMap();
|
||||
export function description(text) {
|
||||
return (target, propertyKey) => {
|
||||
const metadata = componentMetadata.get(target.constructor) || {};
|
||||
metadata[propertyKey] = { ...metadata[propertyKey], description: text };
|
||||
componentMetadata.set(target.constructor, metadata);
|
||||
};
|
||||
}
|
||||
export function control(type, options) {
|
||||
return (target, propertyKey) => {
|
||||
const metadata = componentMetadata.get(target.constructor) || {};
|
||||
metadata[propertyKey] = { ...metadata[propertyKey], control: type, options };
|
||||
componentMetadata.set(target.constructor, metadata);
|
||||
};
|
||||
}
|
||||
// ============================================================================
|
||||
// Button Styles
|
||||
// ============================================================================
|
||||
export const buttonStyles = tv({
|
||||
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
// ============================================================================
|
||||
// Button Component
|
||||
// ============================================================================
|
||||
let MiniButton = MiniButton_1 = class MiniButton extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Variant props with metadata
|
||||
this.variant = 'default';
|
||||
this.size = 'default';
|
||||
// Regular props
|
||||
this.disabled = false;
|
||||
this.loading = false;
|
||||
// Allow style override
|
||||
this.styles = MiniButton_1.defaultStyles;
|
||||
}
|
||||
// Get metadata for documentation/playground
|
||||
static getMetadata() {
|
||||
return componentMetadata.get(this);
|
||||
}
|
||||
// Static template function for reuse
|
||||
static template(props, styles = MiniButton_1.defaultStyles) {
|
||||
const { variant, size, disabled, loading, onClick, className, children } = props;
|
||||
const classString = styles({
|
||||
variant,
|
||||
size,
|
||||
class: className,
|
||||
});
|
||||
return html `
|
||||
<button
|
||||
class=${classString}
|
||||
?disabled=${disabled || loading}
|
||||
@click=${onClick}
|
||||
>
|
||||
${loading
|
||||
? html `<span class="animate-spin">${icon(Loader2, size === 'icon' || size === 'sm' ? 'sm' : 'md')}</span>`
|
||||
: ''}
|
||||
${children || html `<slot></slot>`}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this; // Light DOM
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!this.style.display) {
|
||||
this.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
render() {
|
||||
// Pass 'this' which has all the properties
|
||||
return MiniButton_1.template(this, this.styles);
|
||||
}
|
||||
};
|
||||
// Store default styles as static
|
||||
MiniButton.defaultStyles = buttonStyles;
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Visual style of the button"),
|
||||
control('select', ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'])
|
||||
], MiniButton.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Size of the button"),
|
||||
control('select', ['default', 'sm', 'lg', 'icon'])
|
||||
], MiniButton.prototype, "size", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Disables the button when true"),
|
||||
control('toggle')
|
||||
], MiniButton.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Shows loading spinner when true"),
|
||||
control('toggle')
|
||||
], MiniButton.prototype, "loading", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false }),
|
||||
description("Click event handler")
|
||||
], MiniButton.prototype, "onClick", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false })
|
||||
], MiniButton.prototype, "styles", void 0);
|
||||
MiniButton = MiniButton_1 = __decorate([
|
||||
customElement('mini-button')
|
||||
], MiniButton);
|
||||
export { MiniButton };
|
||||
//# sourceMappingURL=Button.next.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Button.next.js","sourceRoot":"","sources":["../src/Button.next.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
import { definition } from "./Button.cva.js";
|
||||
import { LitComponentBase } from "./LitComponentBase.js";
|
||||
/**
|
||||
* Button component as a Lit element.
|
||||
* The generic parameter provides full type safety for all props.
|
||||
*/
|
||||
export declare class MiniButton extends LitComponentBase<typeof definition> {
|
||||
protected definition: {
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
children: {
|
||||
type: "object";
|
||||
default: (import("lit-html").TemplateResult | string | number) | undefined;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
protected styles: import("./props.js").ExtractStyles<{
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
children: {
|
||||
type: "object";
|
||||
default: (import("lit-html").TemplateResult | string | number) | undefined;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}>;
|
||||
protected renderFn: import("./props.js").RenderFunction<
|
||||
import("./props.js").ExtractProps<{
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
children: {
|
||||
type: "object";
|
||||
default: (import("lit-html").TemplateResult | string | number) | undefined;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}>,
|
||||
import("./props.js").ExtractStyles<{
|
||||
variants: {
|
||||
variant: {
|
||||
options: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
size: {
|
||||
options: readonly ["default", "sm", "lg", "icon"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
loading: {
|
||||
type: "boolean";
|
||||
default: boolean;
|
||||
description: string;
|
||||
};
|
||||
children: {
|
||||
type: "object";
|
||||
default: (import("lit-html").TemplateResult | string | number) | undefined;
|
||||
description: string;
|
||||
};
|
||||
onClick: {
|
||||
type: "function";
|
||||
default: ((e: MouseEvent) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}>
|
||||
>;
|
||||
static properties: any;
|
||||
connectedCallback(): void;
|
||||
reset(): void;
|
||||
}
|
||||
//# sourceMappingURL=ButtonLit.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"ButtonLit.d.ts","sourceRoot":"","sources":["../src/ButtonLit.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;;GAGG;AACH,qBACa,UAAW,SAAQ,gBAAgB,CAAC,OAAO,UAAU,CAAC;IAEhE,SAAS,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAc;IAGlC,SAAS,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAgB;IAGhC,SAAS,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAAgB;IAGlC,MAAM,CAAC,UAAU,MAAiD;IAGlE,iBAAiB;IAMV,KAAK;CAMd"}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { defaultStyle, definition, renderButton } from "./Button.cva.js";
|
||||
import { LitComponentBase } from "./LitComponentBase.js";
|
||||
/**
|
||||
* Button component as a Lit element.
|
||||
* The generic parameter provides full type safety for all props.
|
||||
*/
|
||||
let MiniButton = class MiniButton extends LitComponentBase {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Provide the definition
|
||||
this.definition = definition;
|
||||
// Provide the styles
|
||||
this.styles = defaultStyle;
|
||||
// Provide the render function
|
||||
this.renderFn = renderButton;
|
||||
}
|
||||
// Optional: Override specific methods if needed
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
console.log("Button connected with props:", this.collectProps());
|
||||
}
|
||||
// Optional: Add component-specific methods
|
||||
reset() {
|
||||
this.disabled = false;
|
||||
this.loading = false;
|
||||
this.variant = "default";
|
||||
this.size = "default";
|
||||
}
|
||||
};
|
||||
// Set up Lit properties
|
||||
MiniButton.properties = LitComponentBase.createProperties(definition);
|
||||
MiniButton = __decorate([
|
||||
customElement("mini-button")
|
||||
], MiniButton);
|
||||
export { MiniButton };
|
||||
// Usage example:
|
||||
// const button = new MiniButton();
|
||||
// button.variant = "destructive"; // fully typed!
|
||||
// button.size = "lg"; // fully typed!
|
||||
// button.disabled = true; // fully typed!
|
||||
//# sourceMappingURL=ButtonLit.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"ButtonLit.js","sourceRoot":"","sources":["../src/ButtonLit.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;;GAGG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,gBAAmC;IAA5D;;QACJ,yBAAyB;QACf,eAAU,GAAG,UAAU,CAAC;QAElC,qBAAqB;QACX,WAAM,GAAG,YAAY,CAAC;QAEhC,8BAA8B;QACpB,aAAQ,GAAG,YAAY,CAAC;IAkBrC,CAAC;IAbE,gDAAgD;IAChD,iBAAiB;QACd,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,2CAA2C;IACpC,KAAK;QACT,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;IACzB,CAAC;;AAfD,wBAAwB;AACjB,qBAAU,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,CAAC,AAAhD,CAAiD;AAXxD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0BtB;;AAED,iBAAiB;AACjB,mCAAmC;AACnC,kDAAkD;AAClD,sCAAsC;AACtC,0CAA0C"}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { type BaseComponentProps, type TemplateResult } from "./mini.js";
|
||||
export interface CardProps extends BaseComponentProps {
|
||||
hoverable?: boolean;
|
||||
}
|
||||
export declare function Card(props: CardProps): TemplateResult;
|
||||
export declare function Card(children: TemplateResult | string, hoverable?: boolean, className?: string): TemplateResult;
|
||||
export declare function CardHeader(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardHeader(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function CardAction(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardAction(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function CardTitle(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardTitle(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function CardDescription(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardDescription(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function CardContent(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardContent(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
export declare function CardFooter(props: BaseComponentProps): TemplateResult;
|
||||
export declare function CardFooter(children: TemplateResult | string, className?: string): TemplateResult;
|
||||
//# sourceMappingURL=Card.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;CACtB;AA2CD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC;AACvD,wBAAgB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAYjH,wBAAgB,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACtE,wBAAgB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWlG,wBAAgB,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACtE,wBAAgB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWlG,wBAAgB,SAAS,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACrE,wBAAgB,SAAS,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWjG,wBAAgB,eAAe,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AAC3E,wBAAgB,eAAe,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWvG,wBAAgB,WAAW,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACvE,wBAAgB,WAAW,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;AAWnG,wBAAgB,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,cAAc,CAAC;AACtE,wBAAgB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC"}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
import { fc, html } from "./mini.js";
|
||||
// Internal FC components with named args
|
||||
const _Card = fc(({ hoverable = false, className = "", children }) => {
|
||||
const baseClasses = "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border shadow-xs";
|
||||
const hoverClasses = hoverable ? "hover:shadow-md transition-shadow" : "";
|
||||
return html ` <div class="${baseClasses} ${hoverClasses} py-6 ${className}">${children}</div> `;
|
||||
});
|
||||
const _CardHeader = fc(({ className = "", children }) => {
|
||||
return html `
|
||||
<div
|
||||
class="grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[ui-card-action]:grid-cols-[1fr_auto] ${className}"
|
||||
>
|
||||
${children}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
const _CardAction = fc(({ className = "", children }) => {
|
||||
return html `
|
||||
<div class="col-start-2 row-span-2 row-start-1 self-start justify-self-end ${className}">${children}</div>
|
||||
`;
|
||||
});
|
||||
const _CardTitle = fc(({ className = "", children }) => {
|
||||
return html ` <h3 class="leading-none font-semibold ${className}">${children}</h3> `;
|
||||
});
|
||||
const _CardDescription = fc(({ className = "", children }) => {
|
||||
return html ` <div class="text-muted-foreground text-sm ${className}">${children}</div> `;
|
||||
});
|
||||
const _CardContent = fc(({ className = "", children }) => {
|
||||
return html ` <div class="px-6 ${className}">${children}</div> `;
|
||||
});
|
||||
const _CardFooter = fc(({ className = "", children }) => {
|
||||
return html ` <div class="flex items-center px-6 ${className}">${children}</div> `;
|
||||
});
|
||||
export function Card(propsOrChildren, hoverable = false, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _Card(propsOrChildren);
|
||||
}
|
||||
return _Card({ children: propsOrChildren, hoverable, className });
|
||||
}
|
||||
export function CardHeader(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardHeader(propsOrChildren);
|
||||
}
|
||||
return _CardHeader({ children: propsOrChildren, className });
|
||||
}
|
||||
export function CardAction(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardAction(propsOrChildren);
|
||||
}
|
||||
return _CardAction({ children: propsOrChildren, className });
|
||||
}
|
||||
export function CardTitle(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardTitle(propsOrChildren);
|
||||
}
|
||||
return _CardTitle({ children: propsOrChildren, className });
|
||||
}
|
||||
export function CardDescription(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardDescription(propsOrChildren);
|
||||
}
|
||||
return _CardDescription({ children: propsOrChildren, className });
|
||||
}
|
||||
export function CardContent(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardContent(propsOrChildren);
|
||||
}
|
||||
return _CardContent({ children: propsOrChildren, className });
|
||||
}
|
||||
export function CardFooter(propsOrChildren, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _CardFooter(propsOrChildren);
|
||||
}
|
||||
return _CardFooter({ children: propsOrChildren, className });
|
||||
}
|
||||
//# sourceMappingURL=Card.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,797 +0,0 @@
|
|||
import { ComponentLitBase, type ExtractProps, type ExtractPropsForClass } from "./component.js";
|
||||
export declare const checkboxDefinition: Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
export declare const checkboxDefaultStyle: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
export declare const renderCheckbox: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
export declare function createCheckbox(styles: typeof checkboxDefaultStyle): import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export declare const Checkbox: import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export type CheckboxProps = ExtractProps<typeof checkboxDefinition>;
|
||||
export type CheckboxPropsForClass = ExtractPropsForClass<typeof checkboxDefinition>;
|
||||
export type CheckboxStyles = typeof checkboxDefaultStyle;
|
||||
export declare class MiniCheckbox extends ComponentLitBase<typeof checkboxDefinition, typeof checkboxDefaultStyle> implements CheckboxPropsForClass {
|
||||
size?: CheckboxProps["size"];
|
||||
variant?: CheckboxProps["variant"];
|
||||
checked: CheckboxProps["checked"];
|
||||
indeterminate: CheckboxProps["indeterminate"];
|
||||
disabled: CheckboxProps["disabled"];
|
||||
name: CheckboxProps["name"];
|
||||
value: CheckboxProps["value"];
|
||||
id: string;
|
||||
onChange: CheckboxProps["onChange"];
|
||||
protected definition: Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
protected styles: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
protected renderFn: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
variants: {
|
||||
size: {
|
||||
options: readonly ["sm", "md", "lg"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
variant: {
|
||||
options: readonly ["default", "primary", "destructive"];
|
||||
default: string;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
indeterminate: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
disabled: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
name: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
value: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
id: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
onChange: {
|
||||
type: "function";
|
||||
default: ((checked: boolean) => void) | undefined;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"mini-checkbox": MiniCheckbox;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=Checkbox.cva.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.cva.d.ts","sourceRoot":"","sources":["../src/Checkbox.cva.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,169 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { Check, Minus } from "lucide";
|
||||
import { ComponentLitBase, createComponent, defineComponent, renderComponent, styleComponent, } from "./component.js";
|
||||
import { icon } from "./icons.js";
|
||||
// Step 1: Define the component structure
|
||||
export const checkboxDefinition = defineComponent({
|
||||
tag: "mini-checkbox",
|
||||
variants: {
|
||||
size: {
|
||||
options: ["sm", "md", "lg"],
|
||||
default: "md",
|
||||
description: "Size of the checkbox",
|
||||
},
|
||||
variant: {
|
||||
options: ["default", "primary", "destructive"],
|
||||
default: "default",
|
||||
description: "Visual style of the checkbox",
|
||||
},
|
||||
},
|
||||
props: {
|
||||
checked: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Whether the checkbox is checked",
|
||||
},
|
||||
indeterminate: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Whether the checkbox is in indeterminate state",
|
||||
},
|
||||
disabled: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Whether the checkbox is disabled",
|
||||
},
|
||||
name: {
|
||||
type: "string",
|
||||
default: undefined,
|
||||
description: "Name attribute for form submission",
|
||||
},
|
||||
value: {
|
||||
type: "string",
|
||||
default: undefined,
|
||||
description: "Value attribute for form submission",
|
||||
},
|
||||
id: {
|
||||
type: "string",
|
||||
default: undefined,
|
||||
description: "ID attribute for the checkbox",
|
||||
},
|
||||
onChange: {
|
||||
type: "function",
|
||||
default: undefined,
|
||||
description: "Change event handler",
|
||||
},
|
||||
},
|
||||
});
|
||||
// Step 2: Define styles - single element component now
|
||||
export const checkboxDefaultStyle = styleComponent(checkboxDefinition, {
|
||||
base: "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50",
|
||||
variants: {
|
||||
size: {
|
||||
sm: "h-3.5 w-3.5",
|
||||
md: "h-4 w-4",
|
||||
lg: "h-5 w-5",
|
||||
},
|
||||
variant: {
|
||||
default: "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
|
||||
primary: "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
|
||||
destructive: "data-[state=checked]:bg-destructive data-[state=checked]:border-destructive data-[state=checked]:text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
});
|
||||
// Step 3: Define render function - now receives className function for single-element component
|
||||
export const renderCheckbox = renderComponent(checkboxDefinition, checkboxDefaultStyle, (props, className) => {
|
||||
const { size, checked, indeterminate, disabled, name, value, id, onChange } = props;
|
||||
const handleChange = (e) => {
|
||||
const input = e.target;
|
||||
onChange?.(input.checked);
|
||||
};
|
||||
// Icon size based on checkbox size
|
||||
const iconSize = size === "sm" ? "xs" : size === "lg" ? "sm" : "xs";
|
||||
return html `
|
||||
<div class="relative inline-flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
id=${ifDefined(id ?? undefined)}
|
||||
name=${ifDefined(name ?? undefined)}
|
||||
value=${ifDefined(value ?? undefined)}
|
||||
.checked=${checked || false}
|
||||
?disabled=${disabled}
|
||||
@change=${handleChange}
|
||||
data-state="${checked ? "checked" : "unchecked"}"
|
||||
class="${className()}"
|
||||
/>
|
||||
${checked || indeterminate
|
||||
? html `
|
||||
<span class="absolute inset-0 flex items-center justify-center text-current pointer-events-none">
|
||||
${indeterminate ? icon(Minus, iconSize) : icon(Check, iconSize)}
|
||||
</span>
|
||||
`
|
||||
: null}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
// Step 4: Create checkbox factory
|
||||
export function createCheckbox(styles) {
|
||||
return createComponent(checkboxDefinition, styles, renderCheckbox);
|
||||
}
|
||||
// Default functional checkbox export
|
||||
export const Checkbox = createCheckbox(checkboxDefaultStyle);
|
||||
// Concrete class-based checkbox export
|
||||
let MiniCheckbox = class MiniCheckbox extends ComponentLitBase {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Declare the component props with decorators
|
||||
this.checked = checkboxDefinition.props.checked.default;
|
||||
this.indeterminate = checkboxDefinition.props.indeterminate.default;
|
||||
this.disabled = checkboxDefinition.props.disabled.default;
|
||||
this.name = checkboxDefinition.props.name.default;
|
||||
this.value = checkboxDefinition.props.value.default;
|
||||
this.id = checkboxDefinition.props.id.default ?? "";
|
||||
this.onChange = checkboxDefinition.props.onChange.default;
|
||||
// Provide definition, styles, and render function
|
||||
this.definition = checkboxDefinition;
|
||||
this.styles = checkboxDefaultStyle;
|
||||
this.renderFn = renderCheckbox;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "size", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniCheckbox.prototype, "checked", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniCheckbox.prototype, "indeterminate", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniCheckbox.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "name", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "value", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "id", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false })
|
||||
], MiniCheckbox.prototype, "onChange", void 0);
|
||||
MiniCheckbox = __decorate([
|
||||
customElement(checkboxDefinition.tag)
|
||||
], MiniCheckbox);
|
||||
export { MiniCheckbox };
|
||||
//# sourceMappingURL=Checkbox.cva.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.cva.js","sourceRoot":"","sources":["../src/Checkbox.cva.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { type ComponentPropsWithoutChildren, type TemplateResult } from "./mini.js";
|
||||
interface CheckboxProps extends ComponentPropsWithoutChildren {
|
||||
checked?: boolean;
|
||||
indeterminate?: boolean;
|
||||
disabled?: boolean;
|
||||
label?: TemplateResult | string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
id?: string;
|
||||
onChange?: (checked: boolean) => void;
|
||||
}
|
||||
export declare function Checkbox(props: CheckboxProps): TemplateResult;
|
||||
export declare function Checkbox(checked?: boolean, onChange?: (checked: boolean) => void, label?: TemplateResult | string, disabled?: boolean, className?: string): TemplateResult;
|
||||
export {};
|
||||
//# sourceMappingURL=Checkbox.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,6BAA6B,EAA4B,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAE9G,UAAU,aAAc,SAAQ,6BAA6B;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAgED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,CAAC;AAC/D,wBAAgB,QAAQ,CACrB,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EACrC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,EAC/B,QAAQ,CAAC,EAAE,OAAO,EAClB,SAAS,CAAC,EAAE,MAAM,GAClB,cAAc,CAAC"}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import { createRef, fc, html, ref } from "./mini.js";
|
||||
const _Checkbox = fc(({ checked = false, indeterminate = false, disabled = false, label = "", name = "", value = "", id = "", onChange, className = "", }) => {
|
||||
const inputRef = createRef();
|
||||
// Generate a unique ID if label is provided but ID is not
|
||||
const checkboxId = id || (label ? `checkbox-${Math.random().toString(36).substr(2, 9)}` : "");
|
||||
const handleChange = (e) => {
|
||||
const target = e.target;
|
||||
onChange?.(target.checked);
|
||||
};
|
||||
const baseClasses = "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
|
||||
const checkedClasses = "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground";
|
||||
// Set indeterminate state after render
|
||||
if (inputRef.value) {
|
||||
inputRef.value.indeterminate = indeterminate;
|
||||
}
|
||||
return html `
|
||||
<div class="flex space-x-2 items-start ${className}">
|
||||
<input
|
||||
${ref(inputRef)}
|
||||
type="checkbox"
|
||||
id="${checkboxId}"
|
||||
class="${baseClasses} ${checkedClasses}"
|
||||
.checked=${checked}
|
||||
?disabled=${disabled}
|
||||
name="${name}"
|
||||
value="${value}"
|
||||
data-state="${checked ? "checked" : "unchecked"}"
|
||||
@change=${handleChange}
|
||||
/>
|
||||
${label
|
||||
? html `
|
||||
<label
|
||||
for="${checkboxId}"
|
||||
class="text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer select-none"
|
||||
>
|
||||
${label}
|
||||
</label>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
export function Checkbox(propsOrChecked = false, onChange, label = "", disabled = false, className = "") {
|
||||
if (typeof propsOrChecked === "object" && propsOrChecked !== null) {
|
||||
return _Checkbox(propsOrChecked);
|
||||
}
|
||||
return _Checkbox({ checked: propsOrChecked, onChange, label, disabled, className });
|
||||
}
|
||||
//# sourceMappingURL=Checkbox.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAuB,MAAM,WAAW,CAAC;AAa9G,MAAM,SAAS,GAAG,EAAE,CACjB,CAAC,EACE,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,EAAE,EACV,EAAE,GAAG,EAAE,EACP,QAAQ,EACR,SAAS,GAAG,EAAE,GAChB,EAAE,EAAE;IACF,MAAM,QAAQ,GAAG,SAAS,EAAoB,CAAC;IAC/C,0DAA0D;IAC1D,MAAM,UAAU,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9F,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC/B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,WAAW,GACd,mOAAmO,CAAC;IACvO,MAAM,cAAc,GAAG,8EAA8E,CAAC;IAEtG,uCAAuC;IACvC,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;QAClB,QAAQ,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;IAChD,CAAC;IAED,OAAO,IAAI,CAAA;kDACiC,SAAS;;iBAE1C,GAAG,CAAC,QAAQ,CAAC;;qBAET,UAAU;wBACP,WAAW,IAAI,cAAc;0BAC3B,OAAO;2BACN,QAAQ;uBACZ,IAAI;wBACH,KAAK;6BACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;yBACrC,YAAY;;cAGtB,KAAK;QACF,CAAC,CAAC,IAAI,CAAA;;8BAEM,UAAU;;;yBAGf,KAAK;;kBAEZ;QACA,CAAC,CAAC,EACR;;OAEL,CAAC;AACL,CAAC,CACH,CAAC;AAWF,MAAM,UAAU,QAAQ,CACrB,iBAA0C,KAAK,EAC/C,QAAqC,EACrC,QAAiC,EAAE,EACnC,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,cAAc,KAAK,QAAQ,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;QACjE,OAAO,SAAS,CAAC,cAA+B,CAAC,CAAC;IACrD,CAAC;IACD,OAAO,SAAS,CAAC,EAAE,OAAO,EAAE,cAAyB,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;AAClG,CAAC"}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
import { LitElement, type TemplateResult } from 'lit';
|
||||
import { type VariantProps } from 'tailwind-variants';
|
||||
export declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50", {
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, import("tailwind-variants").TVReturnType<{
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50", unknown, unknown, undefined>>;
|
||||
export type CheckboxStyles = typeof checkboxStyles;
|
||||
export type CheckboxVariants = VariantProps<CheckboxStyles>;
|
||||
export declare class MiniCheckbox extends LitElement {
|
||||
static defaultStyles: import("tailwind-variants").TVReturnType<{
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50", {
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, import("tailwind-variants").TVReturnType<{
|
||||
size: {
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
};
|
||||
variant: {
|
||||
default: string;
|
||||
primary: string;
|
||||
destructive: string;
|
||||
};
|
||||
}, undefined, "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50", unknown, unknown, undefined>>;
|
||||
size: CheckboxVariants['size'];
|
||||
variant: CheckboxVariants['variant'];
|
||||
checked: boolean;
|
||||
indeterminate: boolean;
|
||||
disabled: boolean;
|
||||
name?: string;
|
||||
value?: string;
|
||||
id?: string;
|
||||
onChange?: (checked: boolean) => void;
|
||||
styles: typeof checkboxStyles;
|
||||
className?: string;
|
||||
static template(props: Partial<MiniCheckbox>, styles?: typeof checkboxStyles): TemplateResult;
|
||||
createRenderRoot(): this;
|
||||
connectedCallback(): void;
|
||||
private handleChange;
|
||||
render(): TemplateResult;
|
||||
}
|
||||
export declare const labelStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer", unknown, unknown, undefined>>;
|
||||
export declare class MiniLabel extends LitElement {
|
||||
static defaultStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer", unknown, unknown, undefined>>;
|
||||
for?: string;
|
||||
required: boolean;
|
||||
styles: typeof labelStyles;
|
||||
className?: string;
|
||||
static template(props: Partial<MiniLabel>, styles?: typeof labelStyles): TemplateResult;
|
||||
createRenderRoot(): this;
|
||||
render(): TemplateResult;
|
||||
}
|
||||
export type CheckboxProps = Partial<Omit<MiniCheckbox, keyof LitElement | 'styles'>>;
|
||||
export type LabelProps = Partial<Omit<MiniLabel, keyof LitElement | 'styles'>>;
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mini-checkbox': MiniCheckbox;
|
||||
'mini-label': MiniLabel;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=Checkbox.next.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.next.d.ts","sourceRoot":"","sources":["../src/Checkbox.next.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAS1D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6cAkBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,OAAO,cAAc,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;AAM5D,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kdAAkB;IAMtC,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAQ;IAKtC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAa;IAMjD,OAAO,UAAS;IAKhB,aAAa,UAAS;IAKtB,QAAQ,UAAS;IAKjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,EAAE,CAAC,EAAE,MAAM,CAAC;IAKZ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAItC,MAAM,EAAE,OAAO,cAAc,CAA8B;IAG3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,MAAM,CAAC,QAAQ,CACb,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,EAC5B,MAAM,GAAE,OAAO,cAA2C,GACzD,cAAc;IAwCjB,gBAAgB;IAIhB,iBAAiB;IAQjB,OAAO,CAAC,YAAY,CAGnB;IAED,MAAM;CAOP;AAMD,eAAO,MAAM,WAAW,4YAEtB,CAAC;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,aAAa,6YAAe;IAInC,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,QAAQ,UAAS;IAGjB,MAAM,EAAE,OAAO,WAAW,CAA2B;IAGrD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,QAAQ,CACb,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,EACzB,MAAM,GAAE,OAAO,WAAqC,GACnD,cAAc;IAYjB,gBAAgB;IAIhB,MAAM;CAGP;AAMD,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE/E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;QAC9B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var MiniCheckbox_1, MiniLabel_1;
|
||||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { tv } from 'tailwind-variants';
|
||||
import { Check, Minus } from 'lucide';
|
||||
import { icon } from './icons.js';
|
||||
import { description, control } from './Button.next.js'; // Reuse decorators
|
||||
// ============================================================================
|
||||
// Checkbox Styles
|
||||
// ============================================================================
|
||||
export const checkboxStyles = tv({
|
||||
base: "peer shrink-0 appearance-none rounded border border-input bg-background shadow-xs ring-offset-background transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground hover:border-muted-foreground/50",
|
||||
variants: {
|
||||
size: {
|
||||
sm: "h-3.5 w-3.5",
|
||||
md: "h-4 w-4",
|
||||
lg: "h-5 w-5",
|
||||
},
|
||||
variant: {
|
||||
default: "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
|
||||
primary: "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
|
||||
destructive: "data-[state=checked]:bg-destructive data-[state=checked]:border-destructive data-[state=checked]:text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "md",
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
// ============================================================================
|
||||
// Checkbox Component
|
||||
// ============================================================================
|
||||
let MiniCheckbox = MiniCheckbox_1 = class MiniCheckbox extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Variants
|
||||
this.size = 'md';
|
||||
this.variant = 'default';
|
||||
// State
|
||||
this.checked = false;
|
||||
this.indeterminate = false;
|
||||
this.disabled = false;
|
||||
// Style override
|
||||
this.styles = MiniCheckbox_1.defaultStyles;
|
||||
// Handle change events to update internal state
|
||||
this.handleChange = (checked) => {
|
||||
this.checked = checked;
|
||||
this.onChange?.(checked);
|
||||
};
|
||||
}
|
||||
// Static template for reuse
|
||||
static template(props, styles = MiniCheckbox_1.defaultStyles) {
|
||||
const { size, variant, checked, indeterminate, disabled, name, value, id, onChange, className } = props;
|
||||
const classString = styles({
|
||||
size,
|
||||
variant,
|
||||
class: className,
|
||||
});
|
||||
const handleChange = (e) => {
|
||||
const input = e.target;
|
||||
onChange?.(input.checked);
|
||||
};
|
||||
const iconSize = size === 'sm' ? 'xs' : size === 'lg' ? 'sm' : 'xs';
|
||||
return html `
|
||||
<div class="relative inline-flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
id=${ifDefined(id)}
|
||||
name=${ifDefined(name)}
|
||||
value=${ifDefined(value)}
|
||||
.checked=${checked || false}
|
||||
?disabled=${disabled}
|
||||
@change=${handleChange}
|
||||
data-state="${checked ? 'checked' : 'unchecked'}"
|
||||
class=${classString}
|
||||
/>
|
||||
${(checked || indeterminate)
|
||||
? html `
|
||||
<span class="absolute inset-0 flex items-center justify-center text-current pointer-events-none">
|
||||
${indeterminate ? icon(Minus, iconSize) : icon(Check, iconSize)}
|
||||
</span>
|
||||
`
|
||||
: null}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this; // Light DOM
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!this.style.display) {
|
||||
this.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
render() {
|
||||
// Pass modified props with our internal handler
|
||||
return MiniCheckbox_1.template({ ...this, onChange: this.handleChange }, this.styles);
|
||||
}
|
||||
};
|
||||
MiniCheckbox.defaultStyles = checkboxStyles;
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Size of the checkbox"),
|
||||
control('select', ['sm', 'md', 'lg'])
|
||||
], MiniCheckbox.prototype, "size", void 0);
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Visual style of the checkbox"),
|
||||
control('select', ['default', 'primary', 'destructive'])
|
||||
], MiniCheckbox.prototype, "variant", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Whether the checkbox is checked"),
|
||||
control('toggle')
|
||||
], MiniCheckbox.prototype, "checked", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Whether the checkbox is in indeterminate state"),
|
||||
control('toggle')
|
||||
], MiniCheckbox.prototype, "indeterminate", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Whether the checkbox is disabled"),
|
||||
control('toggle')
|
||||
], MiniCheckbox.prototype, "disabled", void 0);
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Name attribute for form submission")
|
||||
], MiniCheckbox.prototype, "name", void 0);
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("Value attribute for form submission")
|
||||
], MiniCheckbox.prototype, "value", void 0);
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("ID attribute for the checkbox")
|
||||
], MiniCheckbox.prototype, "id", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false }),
|
||||
description("Change event handler")
|
||||
], MiniCheckbox.prototype, "onChange", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false })
|
||||
], MiniCheckbox.prototype, "styles", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniCheckbox.prototype, "className", void 0);
|
||||
MiniCheckbox = MiniCheckbox_1 = __decorate([
|
||||
customElement('mini-checkbox')
|
||||
], MiniCheckbox);
|
||||
export { MiniCheckbox };
|
||||
// ============================================================================
|
||||
// Label Component (Separate, works with any form control)
|
||||
// ============================================================================
|
||||
export const labelStyles = tv({
|
||||
base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
|
||||
});
|
||||
let MiniLabel = MiniLabel_1 = class MiniLabel extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.required = false;
|
||||
this.styles = MiniLabel_1.defaultStyles;
|
||||
}
|
||||
static template(props, styles = MiniLabel_1.defaultStyles) {
|
||||
const { for: forProp, required, className } = props;
|
||||
const classString = styles({ class: className });
|
||||
return html `
|
||||
<label class=${classString} for=${ifDefined(forProp)}>
|
||||
<slot></slot>
|
||||
${required ? html `<span class="text-destructive ml-1">*</span>` : ''}
|
||||
</label>
|
||||
`;
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this; // Light DOM
|
||||
}
|
||||
render() {
|
||||
return MiniLabel_1.template(this, this.styles);
|
||||
}
|
||||
};
|
||||
MiniLabel.defaultStyles = labelStyles;
|
||||
__decorate([
|
||||
property({ type: String }),
|
||||
description("ID of the form element this label is for")
|
||||
], MiniLabel.prototype, "for", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean }),
|
||||
description("Shows a required indicator"),
|
||||
control('toggle')
|
||||
], MiniLabel.prototype, "required", void 0);
|
||||
__decorate([
|
||||
property({ attribute: false })
|
||||
], MiniLabel.prototype, "styles", void 0);
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniLabel.prototype, "className", void 0);
|
||||
MiniLabel = MiniLabel_1 = __decorate([
|
||||
customElement('mini-label')
|
||||
], MiniLabel);
|
||||
export { MiniLabel };
|
||||
//# sourceMappingURL=Checkbox.next.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Checkbox.next.js","sourceRoot":"","sources":["../src/Checkbox.next.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { LitElement } from "lit";
|
||||
import "./CopyButton.js";
|
||||
export declare class CodeBlock extends LitElement {
|
||||
code: string;
|
||||
language: string;
|
||||
protected createRenderRoot(): HTMLElement | DocumentFragment;
|
||||
connectedCallback(): void;
|
||||
private getDecodedCode;
|
||||
render(): import("lit-html").TemplateResult<1>;
|
||||
}
|
||||
//# sourceMappingURL=CodeBlock.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../src/CodeBlock.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,iBAAiB,CAAC;AAazB,qBACa,SAAU,SAAQ,UAAU;IAC1B,IAAI,SAAM;IACV,QAAQ,SAAM;cAEP,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D,iBAAiB;IAM1B,OAAO,CAAC,cAAc;IAUb,MAAM;CA4BjB"}
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import hljs from "highlight.js/lib/core";
|
||||
import bash from "highlight.js/lib/languages/bash";
|
||||
import css from "highlight.js/lib/languages/css";
|
||||
import javascript from "highlight.js/lib/languages/javascript";
|
||||
import json from "highlight.js/lib/languages/json";
|
||||
import python from "highlight.js/lib/languages/python";
|
||||
import sql from "highlight.js/lib/languages/sql";
|
||||
import typescript from "highlight.js/lib/languages/typescript";
|
||||
import html from "highlight.js/lib/languages/xml"; // HTML uses xml
|
||||
import { LitElement, html as litHtml } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
||||
import { i18n } from "./i18n.js";
|
||||
import "./CopyButton.js";
|
||||
// Register only the languages we need
|
||||
hljs.registerLanguage("javascript", javascript);
|
||||
hljs.registerLanguage("typescript", typescript);
|
||||
hljs.registerLanguage("python", python);
|
||||
hljs.registerLanguage("html", html);
|
||||
hljs.registerLanguage("xml", html); // Also register as xml
|
||||
hljs.registerLanguage("css", css);
|
||||
hljs.registerLanguage("json", json);
|
||||
hljs.registerLanguage("bash", bash);
|
||||
hljs.registerLanguage("sql", sql);
|
||||
let CodeBlock = class CodeBlock extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.code = "";
|
||||
this.language = "";
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Make sure the custom element displays as a block element
|
||||
this.style.display = "block";
|
||||
}
|
||||
getDecodedCode() {
|
||||
try {
|
||||
// Decode from base64
|
||||
return decodeURIComponent(escape(atob(this.code)));
|
||||
}
|
||||
catch {
|
||||
// Fallback if not encoded
|
||||
return this.code;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const decodedCode = this.getDecodedCode();
|
||||
// Highlight the code
|
||||
const highlighted = this.language && hljs.getLanguage(this.language)
|
||||
? hljs.highlight(decodedCode, { language: this.language }).value
|
||||
: hljs.highlightAuto(decodedCode).value;
|
||||
// Format language name for display
|
||||
const displayLanguage = this.language || "plaintext";
|
||||
return litHtml `
|
||||
<div class="border border-border rounded-lg overflow-hidden">
|
||||
<!-- Title bar -->
|
||||
<div class="flex items-center justify-between px-3 py-1">
|
||||
<span class="text-xs text-muted-foreground font-mono">${displayLanguage}</span>
|
||||
<copy-button class="[&>button]:!bg-transparent [&>button]:hover:!bg-accent" .text=${decodedCode} title="${i18n("Copy code")}" .showText=${true}></copy-button>
|
||||
</div>
|
||||
<!-- Code content -->
|
||||
<div class="overflow-auto max-h-96">
|
||||
<pre
|
||||
class="!bg-transparent !border-0 !rounded-none m-0 px-4 pb-4 text-xs text-foreground font-mono"
|
||||
><code class="hljs language-${this.language || "plaintext"}">${unsafeHTML(highlighted)}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property()
|
||||
], CodeBlock.prototype, "code", void 0);
|
||||
__decorate([
|
||||
property()
|
||||
], CodeBlock.prototype, "language", void 0);
|
||||
CodeBlock = __decorate([
|
||||
customElement("code-block")
|
||||
], CodeBlock);
|
||||
export { CodeBlock };
|
||||
//# sourceMappingURL=CodeBlock.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../src/CodeBlock.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { LitElement } from "lit";
|
||||
export declare class CopyButton extends LitElement {
|
||||
text: string;
|
||||
title: string;
|
||||
showText: boolean;
|
||||
private copied;
|
||||
protected createRenderRoot(): HTMLElement | DocumentFragment;
|
||||
private handleCopy;
|
||||
render(): import("lit-html").TemplateResult;
|
||||
}
|
||||
//# sourceMappingURL=CopyButton.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../src/CopyButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,qBACa,UAAW,SAAQ,UAAU;IAC3B,IAAI,SAAM;IACD,KAAK,SAAgB;IACW,QAAQ,UAAS;IAE7D,OAAO,CAAC,MAAM,CAAS;cAEb,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;YAIvD,UAAU;IAYf,MAAM;CAYjB"}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { Check, Copy } from "lucide";
|
||||
import { Button } from "./Button.js";
|
||||
import { i18n } from "./i18n.js";
|
||||
import { icon } from "./icons.js";
|
||||
let CopyButton = class CopyButton extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.text = "";
|
||||
this.title = i18n("Copy");
|
||||
this.showText = false;
|
||||
this.copied = false;
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this; // light DOM
|
||||
}
|
||||
async handleCopy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.text);
|
||||
this.copied = true;
|
||||
setTimeout(() => {
|
||||
this.copied = false;
|
||||
}, 2000);
|
||||
}
|
||||
catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return Button({
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
onClick: () => this.handleCopy(),
|
||||
title: this.title,
|
||||
children: html `
|
||||
${this.copied ? icon(Check, "sm") : icon(Copy, "sm")}
|
||||
${this.copied && this.showText ? html `<span>${i18n("Copied!")}</span>` : ""}
|
||||
`,
|
||||
});
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property()
|
||||
], CopyButton.prototype, "text", void 0);
|
||||
__decorate([
|
||||
property()
|
||||
], CopyButton.prototype, "title", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean, attribute: "show-text" })
|
||||
], CopyButton.prototype, "showText", void 0);
|
||||
__decorate([
|
||||
state()
|
||||
], CopyButton.prototype, "copied", void 0);
|
||||
CopyButton = __decorate([
|
||||
customElement("copy-button")
|
||||
], CopyButton);
|
||||
export { CopyButton };
|
||||
//# sourceMappingURL=CopyButton.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../src/CopyButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAG3B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACQ,SAAI,GAAG,EAAE,CAAC;QACD,UAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;QACW,aAAQ,GAAG,KAAK,CAAC;QAErD,WAAM,GAAG,KAAK,CAAC;IA8BnC,CAAC;IA5BqB,gBAAgB;QAChC,OAAO,IAAI,CAAC,CAAC,YAAY;IAC5B,CAAC;IAEO,KAAK,CAAC,UAAU;QACrB,IAAI,CAAC;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,UAAU,CAAC,GAAG,EAAE;gBACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QACZ,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC;IACJ,CAAC;IAEQ,MAAM;QACZ,OAAO,MAAM,CAAC;YACX,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;YAChC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAA;cACT,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;cAClD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,SAAS,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC7E;SACH,CAAC,CAAC;IACN,CAAC;CACH,CAAA;AAlCc;IAAX,QAAQ,EAAE;wCAAW;AACD;IAApB,QAAQ,EAAE;yCAA+B;AACW;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;4CAAkB;AAErD;IAAhB,KAAK,EAAE;0CAAwB;AALtB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAmCtB"}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { type BaseComponentProps } from "./mini.js";
|
||||
export interface DialogProps {
|
||||
isOpen: boolean;
|
||||
onClose?: () => void;
|
||||
children: any;
|
||||
width?: string;
|
||||
height?: string;
|
||||
className?: string;
|
||||
backdropClassName?: string;
|
||||
}
|
||||
export interface DialogHeaderProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
}
|
||||
export interface DialogContentProps extends BaseComponentProps {
|
||||
}
|
||||
export interface DialogFooterProps extends BaseComponentProps {
|
||||
}
|
||||
export declare const Dialog: import("./mini.js").Component<DialogProps>;
|
||||
export declare const DialogHeader: import("./mini.js").Component<DialogHeaderProps>;
|
||||
export declare const DialogContent: import("./mini.js").Component<DialogContentProps>;
|
||||
export declare const DialogFooter: import("./mini.js").Component<DialogFooterProps>;
|
||||
//# sourceMappingURL=Dialog.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAM,MAAM,WAAW,CAAC;AAExD,MAAM,WAAW,WAAW;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;CAAG;AAEjE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;CAAG;AAGhE,eAAO,MAAM,MAAM,4CA8DlB,CAAC;AAGF,eAAO,MAAM,YAAY,kDAOvB,CAAC;AAGH,eAAO,MAAM,aAAa,mDAExB,CAAC;AAGH,eAAO,MAAM,YAAY,kDAEvB,CAAC"}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import { html } from "lit";
|
||||
import { i18n } from "./i18n.js";
|
||||
import { fc } from "./mini.js";
|
||||
// Main Dialog container
|
||||
export const Dialog = fc(({ isOpen, onClose, children, width = "min(600px, 90vw)", height = "auto", className = "", backdropClassName = "bg-black/50", }) => {
|
||||
if (!isOpen)
|
||||
return html ``;
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
// Add escape key handler
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
// Add/remove event listener when dialog opens/closes
|
||||
if (isOpen) {
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
// Clean up on unmount
|
||||
setTimeout(() => {
|
||||
if (!isOpen) {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
return html `
|
||||
<!-- Backdrop -->
|
||||
<div class="fixed inset-0 ${backdropClassName} z-40" @click=${handleBackdropClick}>
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="fixed z-50 bg-background rounded-lg shadow-xl flex flex-col border border-border ${className}"
|
||||
style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: ${width}; height: ${height};"
|
||||
@click=${(e) => e.stopPropagation()}
|
||||
>
|
||||
${children}
|
||||
|
||||
<!-- Close button - absolutely positioned -->
|
||||
<button
|
||||
type="button"
|
||||
@click=${() => onClose?.()}
|
||||
class="absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-all hover:opacity-100 hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none cursor-pointer"
|
||||
aria-label="${i18n("Close")}"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
// Dialog header component
|
||||
export const DialogHeader = fc(({ title, description, className = "" }) => {
|
||||
return html `
|
||||
<div class="pr-8 ${className}">
|
||||
<h2 class="text-lg font-semibold text-foreground${description ? " mb-2" : ""}">${title}</h2>
|
||||
${description ? html `<p class="text-sm text-muted-foreground">${description}</p>` : ""}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
// Dialog content wrapper
|
||||
export const DialogContent = fc(({ children, className = "" }) => {
|
||||
return html ` <div class="p-6 flex flex-col gap-4 ${className}">${children}</div> `;
|
||||
});
|
||||
// Dialog footer for action buttons
|
||||
export const DialogFooter = fc(({ children, className = "" }) => {
|
||||
return html ` <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ${className}">${children}</div> `;
|
||||
});
|
||||
//# sourceMappingURL=Dialog.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../src/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAA2B,EAAE,EAAE,MAAM,WAAW,CAAC;AAsBxD,wBAAwB;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CACrB,CAAC,EACE,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,GAAG,kBAAkB,EAC1B,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,aAAa,GACnC,EAAE,EAAE;IACF,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA,EAAE,CAAC;IAE3B,MAAM,mBAAmB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACtC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;YAChC,OAAO,EAAE,EAAE,CAAC;QACf,CAAC;IACJ,CAAC,CAAC;IAEF,yBAAyB;IACzB,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO,EAAE,EAAE,CAAC;QACf,CAAC;IACJ,CAAC,CAAC;IAEF,qDAAqD;IACrD,IAAI,MAAM,EAAE,CAAC;QACV,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,sBAAsB;QACtB,UAAU,CAAC,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,EAAE,CAAC;gBACX,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YAC1D,CAAC;QACJ,CAAC,EAAE,CAAC,CAAC,CAAC;IACT,CAAC;IAED,OAAO,IAAI,CAAA;;qCAEoB,iBAAiB,iBAAiB,mBAAmB;;;yGAGe,SAAS;sFAC5B,KAAK,aAAa,MAAM;wBACtF,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;iBAExC,QAAQ;;;;;2BAKE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;;gCAEZ,IAAI,CAAC,OAAO,CAAC;;;;;;;;OAQtC,CAAC;AACL,CAAC,CACH,CAAC;AAEF,0BAA0B;AAC1B,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC1F,OAAO,IAAI,CAAA;yBACW,SAAS;2DACyB,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK;WACpF,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,WAAW,MAAM,CAAC,CAAC,CAAC,EAAE;;IAE3F,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,yBAAyB;AACzB,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,CAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAClF,OAAO,IAAI,CAAA,wCAAwC,SAAS,KAAK,QAAQ,SAAS,CAAC;AACtF,CAAC,CAAC,CAAC;AAEH,mCAAmC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAChF,OAAO,IAAI,CAAA,uEAAuE,SAAS,KAAK,QAAQ,SAAS,CAAC;AACrH,CAAC,CAAC,CAAC"}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { LitElement, type TemplateResult } from "lit";
|
||||
export declare abstract class DialogBase extends LitElement {
|
||||
protected modalWidth: string;
|
||||
protected modalHeight: string;
|
||||
private boundHandleKeyDown?;
|
||||
private previousFocus?;
|
||||
protected createRenderRoot(): HTMLElement | DocumentFragment;
|
||||
open(): void;
|
||||
close(): void;
|
||||
protected abstract renderContent(): TemplateResult;
|
||||
render(): TemplateResult;
|
||||
}
|
||||
//# sourceMappingURL=DialogBase.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"DialogBase.d.ts","sourceRoot":"","sources":["../src/DialogBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtD,8BAAsB,UAAW,SAAQ,UAAU;IAEhD,SAAS,CAAC,UAAU,SAAsB;IAC1C,SAAS,CAAC,WAAW,SAAsB;IAC3C,OAAO,CAAC,kBAAkB,CAAC,CAA6B;IACxD,OAAO,CAAC,aAAa,CAAC,CAAc;cAEjB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAIrE,IAAI;IAaJ,KAAK;IAgBL,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAEzC,MAAM;CAUjB"}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import { LitElement } from "lit";
|
||||
import { Dialog } from "./Dialog.js";
|
||||
export class DialogBase extends LitElement {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Modal configuration - can be overridden by subclasses
|
||||
this.modalWidth = "min(600px, 90vw)";
|
||||
this.modalHeight = "min(600px, 80vh)";
|
||||
}
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
open() {
|
||||
// Store the currently focused element
|
||||
this.previousFocus = document.activeElement;
|
||||
document.body.appendChild(this);
|
||||
this.boundHandleKeyDown = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", this.boundHandleKeyDown);
|
||||
}
|
||||
close() {
|
||||
if (this.boundHandleKeyDown) {
|
||||
window.removeEventListener("keydown", this.boundHandleKeyDown);
|
||||
}
|
||||
this.remove();
|
||||
// Restore focus to the previously focused element
|
||||
if (this.previousFocus?.focus) {
|
||||
// Use requestAnimationFrame to ensure the dialog is fully removed first
|
||||
requestAnimationFrame(() => {
|
||||
this.previousFocus?.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return Dialog({
|
||||
isOpen: true,
|
||||
onClose: () => this.close(),
|
||||
width: this.modalWidth,
|
||||
height: this.modalHeight,
|
||||
backdropClassName: "bg-black/50 backdrop-blur-sm",
|
||||
children: this.renderContent(),
|
||||
});
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=DialogBase.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"DialogBase.js","sourceRoot":"","sources":["../src/DialogBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;QACG,wDAAwD;QAC9C,eAAU,GAAG,kBAAkB,CAAC;QAChC,gBAAW,GAAG,kBAAkB,CAAC;IAiD9C,CAAC;IA7CqB,gBAAgB;QAChC,OAAO,IAAI,CAAC;IACf,CAAC;IAED,IAAI;QACD,sCAAsC;QACtC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAE3D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,CAAC;QACJ,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAED,KAAK;QACF,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC3B,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAClE,CAAC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;QAEd,kDAAkD;QAClD,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;YAC7B,wEAAwE;YACxE,qBAAqB,CAAC,GAAG,EAAE;gBACxB,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;YAC/B,CAAC,CAAC,CAAC;QACN,CAAC;IACJ,CAAC;IAKQ,MAAM;QACZ,OAAO,MAAM,CAAC;YACX,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;YAC3B,KAAK,EAAE,IAAI,CAAC,UAAU;YACtB,MAAM,EAAE,IAAI,CAAC,WAAW;YACxB,iBAAiB,EAAE,8BAA8B;YACjD,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE;SAChC,CAAC,CAAC;IACN,CAAC;CACH"}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { type BaseComponentProps } from "./mini.js";
|
||||
export interface DiffProps extends BaseComponentProps {
|
||||
oldText: string;
|
||||
newText: string;
|
||||
title?: string;
|
||||
}
|
||||
export declare const Diff: import("./mini.js").Component<DiffProps>;
|
||||
//# sourceMappingURL=Diff.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Diff.d.ts","sourceRoot":"","sources":["../src/Diff.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAiC,MAAM,WAAW,CAAC;AAEnF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,0CAkDf,CAAC"}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import * as DiffLib from "diff";
|
||||
import { fc, html } from "./mini.js";
|
||||
export const Diff = fc(({ oldText, newText, title, className = "" }) => {
|
||||
const parts = DiffLib.diffLines(oldText ?? "", newText ?? "");
|
||||
const lines = [];
|
||||
let addedCount = 0;
|
||||
let removedCount = 0;
|
||||
for (const part of parts) {
|
||||
// Split into lines and drop a trailing empty line (diffLines often ends with one)
|
||||
const raw = part.value.split("\n");
|
||||
if (raw[raw.length - 1] === "")
|
||||
raw.pop();
|
||||
for (const line of raw) {
|
||||
const prefix = part.added ? "+" : part.removed ? "-" : " ";
|
||||
// Keep text readable across light/dark by using theme foreground,
|
||||
// only tint the background to indicate add/remove.
|
||||
const rowClass = part.added ? "bg-emerald-500/15" : part.removed ? "bg-red-500/15" : "";
|
||||
if (part.added)
|
||||
addedCount++;
|
||||
if (part.removed)
|
||||
removedCount++;
|
||||
lines.push(html `<div class="${rowClass}">
|
||||
<pre class="m-0 px-4 py-0.5 text-xs font-mono text-foreground">${prefix} ${line}</pre>
|
||||
</div>`);
|
||||
}
|
||||
}
|
||||
const content = html ` <div class="overflow-auto max-h-96">${lines}</div> `;
|
||||
// If title is provided, render with a header like CodeBlock
|
||||
if (title) {
|
||||
return html `
|
||||
<div class="border border-border rounded-lg overflow-hidden ${className}">
|
||||
<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
|
||||
<span class="text-xs text-muted-foreground font-mono">${title}</span>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
<span class="text-emerald-600">+${addedCount}</span>
|
||||
<span class="mx-1">/</span>
|
||||
<span class="text-red-600">-${removedCount}</span>
|
||||
</span>
|
||||
</div>
|
||||
${content}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// Otherwise, simple bordered container
|
||||
return html `<div class="border border-border rounded-lg overflow-hidden ${className}">${content}</div>`;
|
||||
});
|
||||
//# sourceMappingURL=Diff.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Diff.js","sourceRoot":"","sources":["../src/Diff.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,MAAM,CAAC;AAChC,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAuB,MAAM,WAAW,CAAC;AAQnF,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,EAAkB,EAAE;IAC/F,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,IAAI,EAAE,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAqB,EAAE,CAAC;IAEnC,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,IAAI,YAAY,GAAG,CAAC,CAAC;IAErB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACxB,kFAAkF;QAClF,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE;YAAE,GAAG,CAAC,GAAG,EAAE,CAAC;QAE1C,KAAK,MAAM,IAAI,IAAI,GAAG,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAC3D,kEAAkE;YAClE,mDAAmD;YACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;YAExF,IAAI,IAAI,CAAC,KAAK;gBAAE,UAAU,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,OAAO;gBAAE,YAAY,EAAE,CAAC;YAEjC,KAAK,CAAC,IAAI,CACP,IAAI,CAAA,eAAe,QAAQ;gFACyC,MAAM,IAAI,IAAI;mBAC3E,CACT,CAAC;QACL,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAA,wCAAwC,KAAK,SAAS,CAAC;IAE3E,4DAA4D;IAC5D,IAAI,KAAK,EAAE,CAAC;QACT,OAAO,IAAI,CAAA;uEACsD,SAAS;;uEAET,KAAK;;oDAExB,UAAU;;gDAEd,YAAY;;;cAG9C,OAAO;;OAEd,CAAC;IACL,CAAC;IAED,uCAAuC;IACvC,OAAO,IAAI,CAAA,+DAA+D,SAAS,KAAK,OAAO,QAAQ,CAAC;AAC3G,CAAC,CAAC,CAAC"}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import { type TemplateResult } from "lit";
|
||||
import { type ButtonProps } from "./Button.js";
|
||||
import { type IconSize } from "./icons.js";
|
||||
export interface DownloadButtonProps {
|
||||
content: string | Uint8Array;
|
||||
filename: string;
|
||||
mimeType?: string;
|
||||
title?: string;
|
||||
showText?: boolean;
|
||||
size?: ButtonProps["size"];
|
||||
variant?: ButtonProps["variant"];
|
||||
iconSize?: IconSize;
|
||||
isBase64?: boolean;
|
||||
}
|
||||
export declare function DownloadButton({ content, filename, mimeType, title, showText, size, variant, iconSize, isBase64, }: DownloadButtonProps): TemplateResult;
|
||||
//# sourceMappingURL=DownloadButton.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../src/DownloadButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IACjC,OAAO,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,QAAuB,EACvB,KAAwB,EACxB,QAAgB,EAChB,IAAW,EACX,OAAiB,EACjB,QAAe,EACf,QAAgB,GAClB,EAAE,mBAAmB,GAAG,cAAc,CA+CtC"}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { html } from "lit";
|
||||
import { Download } from "lucide";
|
||||
import { Button } from "./Button.js";
|
||||
import { i18n } from "./i18n.js";
|
||||
import { icon } from "./icons.js";
|
||||
export function DownloadButton({ content, filename, mimeType = "text/plain", title = i18n("Download"), showText = false, size = "sm", variant = "ghost", iconSize = "sm", isBase64 = false, }) {
|
||||
const handleDownload = () => {
|
||||
let blobContent;
|
||||
if (content instanceof Uint8Array) {
|
||||
blobContent = content.buffer.slice(content.byteOffset, content.byteOffset + content.byteLength);
|
||||
}
|
||||
else if (typeof content === "string") {
|
||||
// Check if it's base64
|
||||
const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
|
||||
const isBase64String = isBase64 || (content.length >= 4 && content.length % 4 === 0 && base64Regex.test(content));
|
||||
if (isBase64String) {
|
||||
try {
|
||||
const binaryString = atob(content);
|
||||
const bytes = new Uint8Array(binaryString.length);
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
blobContent = bytes;
|
||||
}
|
||||
catch {
|
||||
// If base64 decode fails, treat as plain text
|
||||
blobContent = content;
|
||||
}
|
||||
}
|
||||
else {
|
||||
blobContent = content;
|
||||
}
|
||||
}
|
||||
else {
|
||||
blobContent = "";
|
||||
}
|
||||
const blob = new Blob([blobContent], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
return Button({
|
||||
variant,
|
||||
size,
|
||||
onClick: handleDownload,
|
||||
title,
|
||||
children: html ` ${icon(Download, iconSize)} ${showText ? html `<span>${i18n("Download")}</span>` : ""} `,
|
||||
});
|
||||
}
|
||||
//# sourceMappingURL=DownloadButton.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../src/DownloadButton.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { type ButtonProps } from "./Button.js";
|
||||
export interface FileButtonProps extends Omit<ButtonProps, "onClick"> {
|
||||
accept?: string;
|
||||
multiple?: boolean;
|
||||
maxFileSize?: number;
|
||||
onFilesSelected?: (files: File[]) => void;
|
||||
}
|
||||
export declare const FileButton: ({ accept, multiple, maxFileSize, onFilesSelected, disabled, loading, ...buttonProps }: FileButtonProps) => import("lit-html").TemplateResult<1>;
|
||||
//# sourceMappingURL=FileButton.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"FileButton.d.ts","sourceRoot":"","sources":["../src/FileButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,UAAU,GAAI,uFAQxB,eAAe,yCAmDjB,CAAC"}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { createRef, ref } from "lit/directives/ref.js";
|
||||
import { Button } from "./Button.js";
|
||||
import { html } from "./mini.js";
|
||||
export const FileButton = ({ accept = "*", multiple = false, maxFileSize, onFilesSelected, disabled = false, loading = false, ...buttonProps }) => {
|
||||
const inputRef = createRef();
|
||||
const handleFileChange = (e) => {
|
||||
const input = e.target;
|
||||
const files = Array.from(input.files || []);
|
||||
if (maxFileSize) {
|
||||
const validFiles = files.filter((file) => {
|
||||
if (file.size > maxFileSize) {
|
||||
console.warn(`File ${file.name} exceeds maximum size of ${maxFileSize} bytes`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
if (validFiles.length > 0) {
|
||||
onFilesSelected?.(validFiles);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (files.length > 0) {
|
||||
onFilesSelected?.(files);
|
||||
}
|
||||
}
|
||||
// Reset input so same file can be selected again
|
||||
input.value = "";
|
||||
};
|
||||
return html `
|
||||
<label class="inline-block">
|
||||
<input
|
||||
type="file"
|
||||
class="sr-only"
|
||||
accept="${accept}"
|
||||
?multiple="${multiple}"
|
||||
?disabled="${disabled || loading}"
|
||||
@change="${handleFileChange}"
|
||||
${ref(inputRef)}
|
||||
/>
|
||||
${Button({
|
||||
...buttonProps,
|
||||
disabled: disabled || loading,
|
||||
loading,
|
||||
onClick: (e) => {
|
||||
// Prevent label from triggering click
|
||||
e.preventDefault();
|
||||
inputRef.value?.click();
|
||||
},
|
||||
})}
|
||||
</label>
|
||||
`;
|
||||
};
|
||||
//# sourceMappingURL=FileButton.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"FileButton.js","sourceRoot":"","sources":["../src/FileButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AASjC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACxB,MAAM,GAAG,GAAG,EACZ,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,GAAG,WAAW,EACC,EAAE,EAAE;IACnB,MAAM,QAAQ,GAAG,SAAS,EAAoB,CAAC;IAE/C,MAAM,gBAAgB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACnC,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAE5C,IAAI,WAAW,EAAE,CAAC;YACf,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;gBACtC,IAAI,IAAI,CAAC,IAAI,GAAG,WAAW,EAAE,CAAC;oBAC3B,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,4BAA4B,WAAW,QAAQ,CAAC,CAAC;oBAC/E,OAAO,KAAK,CAAC;gBAChB,CAAC;gBACD,OAAO,IAAI,CAAC;YACf,CAAC,CAAC,CAAC;YACH,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACzB,eAAe,EAAE,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;QACJ,CAAC;aAAM,CAAC;YACL,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACpB,eAAe,EAAE,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACJ,CAAC;QAED,iDAAiD;QACjD,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;sBAKQ,MAAM;yBACH,QAAQ;yBACR,QAAQ,IAAI,OAAO;uBACrB,gBAAgB;cACzB,GAAG,CAAC,QAAQ,CAAC;;WAEhB,MAAM,CAAC;QACN,GAAG,WAAW;QACd,QAAQ,EAAE,QAAQ,IAAI,OAAO;QAC7B,OAAO;QACP,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;YACnB,sCAAsC;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;QAC3B,CAAC;KACH,CAAC;;IAEP,CAAC;AACL,CAAC,CAAC"}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { type Ref } from "lit/directives/ref.js";
|
||||
import { type BaseComponentProps } from "./mini.js";
|
||||
export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search" | "date";
|
||||
export type InputSize = "sm" | "md" | "lg";
|
||||
export interface InputProps extends BaseComponentProps {
|
||||
id?: string;
|
||||
type?: InputType;
|
||||
size?: InputSize;
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
label?: string;
|
||||
error?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
required?: boolean;
|
||||
name?: string;
|
||||
autocomplete?: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
inputRef?: Ref<HTMLInputElement>;
|
||||
onInput?: (e: Event) => void;
|
||||
onChange?: (e: Event) => void;
|
||||
onKeyDown?: (e: KeyboardEvent) => void;
|
||||
onKeyUp?: (e: KeyboardEvent) => void;
|
||||
}
|
||||
export declare const Input: import("./mini.js").Component<InputProps>;
|
||||
//# sourceMappingURL=Input.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../src/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAO,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,KAAK,kBAAkB,EAAY,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrG,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,KAAK,2CAuFjB,CAAC"}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { ref } from "lit/directives/ref.js";
|
||||
import { i18n } from "./i18n.js";
|
||||
import { fc, html } from "./mini.js";
|
||||
export const Input = fc(({ id = "", type = "text", size = "md", value = "", placeholder = "", label = "", error = "", disabled = false, readonly = false, required = false, name = "", autocomplete = "", min, max, step, inputRef, onInput, onChange, onKeyDown, onKeyUp, className = "", }) => {
|
||||
const sizeClasses = {
|
||||
sm: "h-8 px-3 py-1 text-sm",
|
||||
md: "h-9 px-3 py-1 text-sm md:text-sm",
|
||||
lg: "h-10 px-4 py-1 text-base",
|
||||
};
|
||||
const baseClasses = "flex w-full min-w-0 rounded-md border bg-transparent text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium";
|
||||
const interactionClasses = "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground";
|
||||
const focusClasses = "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
|
||||
const darkClasses = "dark:bg-input/30";
|
||||
const stateClasses = error
|
||||
? "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
|
||||
: "border-input";
|
||||
const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
|
||||
const handleInput = (e) => {
|
||||
onInput?.(e);
|
||||
};
|
||||
const handleChange = (e) => {
|
||||
onChange?.(e);
|
||||
};
|
||||
return html `
|
||||
<div class="flex flex-col gap-1.5 ${className}">
|
||||
${label
|
||||
? html `
|
||||
<label class="text-sm font-medium text-foreground">
|
||||
${label} ${required ? html `<span class="text-destructive">${i18n("*")}</span>` : ""}
|
||||
</label>
|
||||
`
|
||||
: ""}
|
||||
<input
|
||||
id=${id}
|
||||
type="${type}"
|
||||
class="${baseClasses} ${sizeClasses[size]} ${interactionClasses} ${focusClasses} ${darkClasses} ${stateClasses} ${disabledClasses}"
|
||||
.value=${value}
|
||||
placeholder="${placeholder}"
|
||||
?disabled=${disabled}
|
||||
?readonly=${readonly}
|
||||
?required=${required}
|
||||
?aria-invalid=${!!error}
|
||||
name="${name}"
|
||||
autocomplete="${autocomplete}"
|
||||
min="${min ?? ""}"
|
||||
max="${max ?? ""}"
|
||||
step="${step ?? ""}"
|
||||
@input=${handleInput}
|
||||
@change=${handleChange}
|
||||
@keydown=${onKeyDown}
|
||||
@keyup=${onKeyUp}
|
||||
${inputRef ? ref(inputRef) : ""}
|
||||
/>
|
||||
${error ? html `<span class="text-sm text-destructive">${error}</span>` : ""}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
//# sourceMappingURL=Input.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../src/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AA4B9D,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CACpB,CAAC,EACE,EAAE,GAAG,EAAE,EACP,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,EAAE,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,EAAE,EACT,YAAY,GAAG,EAAE,EACjB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GAAG,EAAE,GAChB,EAAE,EAAE;IACF,MAAM,WAAW,GAAG;QACjB,EAAE,EAAE,uBAAuB;QAC3B,EAAE,EAAE,kCAAkC;QACtC,EAAE,EAAE,0BAA0B;KAChC,CAAC;IAEF,MAAM,WAAW,GACd,qNAAqN,CAAC;IACzN,MAAM,kBAAkB,GACrB,0FAA0F,CAAC;IAC9F,MAAM,YAAY,GAAG,+EAA+E,CAAC;IACrG,MAAM,WAAW,GAAG,kBAAkB,CAAC;IACvC,MAAM,YAAY,GAAG,KAAK;QACvB,CAAC,CAAC,2FAA2F;QAC7F,CAAC,CAAC,cAAc,CAAC;IACpB,MAAM,eAAe,GAAG,8EAA8E,CAAC;IAEvG,MAAM,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC9B,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC/B,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;6CAC4B,SAAS;cAEvC,KAAK;QACF,CAAC,CAAC,IAAI,CAAA;;yBAEC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;kBAExF;QACA,CAAC,CAAC,EACR;;oBAEQ,EAAE;uBACC,IAAI;wBACH,WAAW,IACjB,WAAW,CAAC,IAAI,CACnB,IAAI,kBAAkB,IAAI,YAAY,IAAI,WAAW,IAAI,YAAY,IAAI,eAAe;wBAC/E,KAAK;8BACC,WAAW;2BACd,QAAQ;2BACR,QAAQ;2BACR,QAAQ;+BACJ,CAAC,CAAC,KAAK;uBACf,IAAI;+BACI,YAAY;sBACrB,GAAG,IAAI,EAAE;sBACT,GAAG,IAAI,EAAE;uBACR,IAAI,IAAI,EAAE;wBACT,WAAW;yBACV,YAAY;0BACX,SAAS;wBACX,OAAO;iBACd,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;;cAEhC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;;OAEhF,CAAC;AACL,CAAC,CACH,CAAC"}
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
import { ComponentLitBase, type ExtractProps, type ExtractPropsForClass } from "./component.js";
|
||||
export declare const labelDefinition: Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
export declare const labelDefaultStyle: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
export declare const renderLabel: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
export declare function createLabel(styles: typeof labelDefaultStyle): import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export declare const Label: import("./mini.js").Component<ExtractProps<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>>;
|
||||
export type LabelProps = ExtractProps<typeof labelDefinition>;
|
||||
export type LabelPropsForClass = ExtractPropsForClass<typeof labelDefinition>;
|
||||
export type LabelStyles = typeof labelDefaultStyle;
|
||||
export declare class MiniLabel extends ComponentLitBase<typeof labelDefinition> implements LabelPropsForClass {
|
||||
for: LabelProps["for"];
|
||||
required: LabelProps["required"];
|
||||
protected definition: Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
};
|
||||
protected styles: import("./component.js").SimpleStyles<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>;
|
||||
protected renderFn: (props: ExtractProps<Omit<{
|
||||
tag: string;
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
};
|
||||
}, "props"> & {
|
||||
props: {
|
||||
for: {
|
||||
type: "string";
|
||||
default: string | undefined;
|
||||
description: string;
|
||||
};
|
||||
required: {
|
||||
type: "boolean";
|
||||
default: false;
|
||||
description: string;
|
||||
};
|
||||
} & {
|
||||
className: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "classname";
|
||||
}>;
|
||||
children: Extract<import("./component.js").PropDef<unknown>, {
|
||||
type: "children";
|
||||
}>;
|
||||
} & Record<never, never>;
|
||||
}>, className: (overrides?: import("tailwind-merge").ClassNameValue) => string) => import("lit-html").TemplateResult;
|
||||
connectedCallback(): void;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"mini-label": MiniLabel;
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=Label.cva.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Label.cva.d.ts","sourceRoot":"","sources":["../src/Label.cva.ts"],"names":[],"mappings":"AAGA,OAAO,EACJ,gBAAgB,EAGhB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EAG3B,MAAM,gBAAgB,CAAC;AAGxB,eAAO,MAAM,eAAe;;;;;qBAKG,MAAM,GAAG,SAAS;;;;;;;;;;;;;qBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CAS/C,CAAC;AAGH,eAAO,MAAM,iBAAiB;;;;;qBAZC,MAAM,GAAG,SAAS;;;;;;;;;;;;;qBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;EAc/C,CAAC;AAGH,eAAO,MAAM,WAAW;;;;;qBAjBO,MAAM,GAAG,SAAS;;;;;;;;;;;;;qBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;yBAuEwrO,CAAC,0FAzCxuO,CAAC;AAGH,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,iBAAiB;;;;;qBAjC7B,MAAM,GAAG,SAAS;;;;;;;;;;;;;qBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;IAmChD;AAGD,eAAO,MAAM,KAAK;;;;;qBAtCa,MAAM,GAAG,SAAS;;;;;;;;;;;;;qBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;GAsCE,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9E,MAAM,MAAM,WAAW,GAAG,OAAO,iBAAiB,CAAC;AAGnD,qBACa,SAAU,SAAQ,gBAAgB,CAAC,OAAO,eAAe,CAAE,YAAW,kBAAkB;IAGlG,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,CAAqC;IAG3D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAA0C;IAG1E,SAAS,CAAC,UAAU;;;;;yBAtDQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;yBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;MAsDP;IACvC,SAAS,CAAC,MAAM;;;;;yBAvDY,MAAM,GAAG,SAAS;;;;;;;;;;;;;yBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;OAuDT;IACrC,SAAS,CAAC,QAAQ;;;;;yBAxDU,MAAM,GAAG,SAAS;;;;;;;;;;;;;yBAAlB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;6BAuEwrO,CAAC,2FAftsO;IAEjC,iBAAiB;CAMnB;AAGD,OAAO,CAAC,MAAM,CAAC;IACZ,UAAU,qBAAqB;QAC5B,YAAY,EAAE,SAAS,CAAC;KAC1B;CACH"}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { ComponentLitBase, createComponent, defineComponent, renderComponent, styleComponent, } from "./component.js";
|
||||
// Step 1: Define the component structure
|
||||
export const labelDefinition = defineComponent({
|
||||
tag: "mini-label",
|
||||
props: {
|
||||
for: {
|
||||
type: "string",
|
||||
default: undefined,
|
||||
description: "ID of the form element this label is for",
|
||||
},
|
||||
required: {
|
||||
type: "boolean",
|
||||
default: false,
|
||||
description: "Shows a required indicator",
|
||||
},
|
||||
},
|
||||
});
|
||||
// Step 2: Define styles
|
||||
export const labelDefaultStyle = styleComponent(labelDefinition, {
|
||||
base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
|
||||
});
|
||||
// Step 3: Define render function
|
||||
export const renderLabel = renderComponent(labelDefinition, labelDefaultStyle, (props, className) => {
|
||||
const { children, required } = props;
|
||||
const forAttr = props.for;
|
||||
return html `
|
||||
<label
|
||||
class=${className()}
|
||||
for=${ifDefined(forAttr)}
|
||||
>
|
||||
${children}
|
||||
${required ? html `<span class="text-destructive ml-1">*</span>` : ""}
|
||||
</label>
|
||||
`;
|
||||
});
|
||||
// Step 4: Create label factory
|
||||
export function createLabel(styles) {
|
||||
return createComponent(labelDefinition, styles, renderLabel);
|
||||
}
|
||||
// Default functional label export
|
||||
export const Label = createLabel(labelDefaultStyle);
|
||||
// Concrete class-based label export
|
||||
let MiniLabel = class MiniLabel extends ComponentLitBase {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
// Declare the component props with decorators
|
||||
this.for = labelDefinition.props.for.default;
|
||||
this.required = labelDefinition.props.required.default;
|
||||
// Provide definition, styles, and render function
|
||||
this.definition = labelDefinition;
|
||||
this.styles = labelDefaultStyle;
|
||||
this.renderFn = renderLabel;
|
||||
}
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (!this.style.display) {
|
||||
this.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
property({ type: String })
|
||||
], MiniLabel.prototype, "for", void 0);
|
||||
__decorate([
|
||||
property({ type: Boolean })
|
||||
], MiniLabel.prototype, "required", void 0);
|
||||
MiniLabel = __decorate([
|
||||
customElement(labelDefinition.tag)
|
||||
], MiniLabel);
|
||||
export { MiniLabel };
|
||||
//# sourceMappingURL=Label.cva.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Label.cva.js","sourceRoot":"","sources":["../src/Label.cva.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EACJ,gBAAgB,EAChB,eAAe,EACf,eAAe,EAGf,eAAe,EACf,cAAc,GAChB,MAAM,gBAAgB,CAAC;AAExB,yCAAyC;AACzC,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC5C,GAAG,EAAE,YAAY;IACjB,KAAK,EAAE;QACJ,GAAG,EAAE;YACF,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAA+B;YACxC,WAAW,EAAE,0CAA0C;SACzD;QACD,QAAQ,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,4BAA4B;SAC3C;KACH;CACH,CAAC,CAAC;AAEH,wBAAwB;AACxB,MAAM,CAAC,MAAM,iBAAiB,GAAG,cAAc,CAAC,eAAe,EAAE;IAC9D,IAAI,EAAE,2GAA2G;CACnH,CAAC,CAAC;AAEH,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,eAAe,EAAE,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;IACjG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC;IAE1B,OAAO,IAAI,CAAA;;iBAEG,SAAS,EAAE;eACb,SAAS,CAAC,OAAO,CAAC;;WAEtB,QAAQ;WACR,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,CAAC,CAAC,CAAC,EAAE;;IAEzE,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,+BAA+B;AAC/B,MAAM,UAAU,WAAW,CAAC,MAAgC;IACzD,OAAO,eAAe,CAAC,eAAe,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;AAChE,CAAC;AAED,kCAAkC;AAClC,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AAKpD,oCAAoC;AAE7B,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,gBAAwC;IAAhE;;QACJ,8CAA8C;QAE9C,QAAG,GAAsB,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QAG3D,aAAQ,GAA2B,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC;QAE1E,kDAAkD;QACxC,eAAU,GAAG,eAAe,CAAC;QAC7B,WAAM,GAAG,iBAAiB,CAAC;QAC3B,aAAQ,GAAG,WAAW,CAAC;IAQpC,CAAC;IANE,iBAAiB;QACd,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;QACvC,CAAC;IACJ,CAAC;CACH,CAAA;AAhBE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACgC;AAG3D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAC8C;AANhE,SAAS;IADrB,aAAa,CAAC,eAAe,CAAC,GAAG,CAAC;GACtB,SAAS,CAmBrB"}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { type BaseComponentProps, type TemplateResult } from "./mini.js";
|
||||
interface LabelProps extends BaseComponentProps {
|
||||
htmlFor?: string;
|
||||
required?: boolean;
|
||||
}
|
||||
export declare function Label(props: LabelProps): TemplateResult;
|
||||
export declare function Label(children: TemplateResult | string, htmlFor?: string, required?: boolean, className?: string): TemplateResult;
|
||||
export {};
|
||||
//# sourceMappingURL=Label.d.ts.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEnF,UAAU,UAAW,SAAQ,kBAAkB;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB;AAcD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,cAAc,CAAC;AACzD,wBAAgB,KAAK,CAClB,QAAQ,EAAE,cAAc,GAAG,MAAM,EACjC,OAAO,CAAC,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,OAAO,EAClB,SAAS,CAAC,EAAE,MAAM,GAClB,cAAc,CAAC"}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { i18n } from "./i18n.js";
|
||||
import { fc, html } from "./mini.js";
|
||||
const _Label = fc(({ htmlFor = "", required = false, className = "", children }) => {
|
||||
const baseClasses = "inline-block text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2";
|
||||
return html `
|
||||
<label for="${htmlFor}" class="${baseClasses} ${className}">
|
||||
${children} ${required ? html `<span class="text-destructive ml-1">${i18n("*")}</span>` : ""}
|
||||
</label>
|
||||
`;
|
||||
});
|
||||
export function Label(propsOrChildren, htmlFor = "", required = false, className = "") {
|
||||
if (typeof propsOrChildren === "object" && propsOrChildren !== null && "children" in propsOrChildren) {
|
||||
return _Label(propsOrChildren);
|
||||
}
|
||||
return _Label({ children: propsOrChildren, htmlFor, required, className });
|
||||
}
|
||||
//# sourceMappingURL=Label.js.map
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../src/Label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAA2B,EAAE,EAAE,IAAI,EAAuB,MAAM,WAAW,CAAC;AAOnF,MAAM,MAAM,GAAG,EAAE,CAAa,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,MAAM,WAAW,GACd,8HAA8H,CAAC;IAElI,OAAO,IAAI,CAAA;oBACM,OAAO,YAAY,WAAW,IAAI,SAAS;WACpD,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;IAEhG,CAAC;AACL,CAAC,CAAC,CAAC;AAUH,MAAM,UAAU,KAAK,CAClB,eAAqD,EACrD,OAAO,GAAG,EAAE,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,eAAe,KAAK,QAAQ,IAAI,eAAe,KAAK,IAAI,IAAI,UAAU,IAAI,eAAe,EAAE,CAAC;QACpG,OAAO,MAAM,CAAC,eAA6B,CAAC,CAAC;IAChD,CAAC;IACD,OAAO,MAAM,CAAC,EAAE,QAAQ,EAAE,eAA0C,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;AACzG,CAAC"}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue