@spark-ui/components 18.0.18 → 18.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/tag/Tag.styles.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ export declare const tagStyles: (props?: ({
|
|
|
3
3
|
design?: "filled" | "outlined" | "tinted" | null | undefined;
|
|
4
4
|
size?: "md" | "lg" | null | undefined;
|
|
5
5
|
shape?: "square" | "rounded" | "pill" | null | undefined;
|
|
6
|
-
intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
|
|
6
|
+
intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "ai" | "danger" | null | undefined;
|
|
7
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
8
|
export type TagStylesProps = VariantProps<typeof tagStyles>;
|
package/dist/tag/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@spark-ui/internal-utils");var i=[{intent:`main`,design:`filled`,class:(0,r.tw)([`bg-main`,`text-on-main`])},{intent:`support`,design:`filled`,class:(0,r.tw)([`bg-support`,`text-on-support`])},{intent:`accent`,design:`filled`,class:(0,r.tw)([`bg-accent`,`text-on-accent`])},{intent:`success`,design:`filled`,class:(0,r.tw)([`bg-success`,`text-on-success`])},{intent:`alert`,design:`filled`,class:(0,r.tw)([`bg-alert`,`text-on-alert`])},{intent:`danger`,design:`filled`,class:(0,r.tw)([`bg-error`,`text-on-error`])},{intent:`info`,design:`filled`,class:(0,r.tw)([`bg-info`,`text-on-info`])},{intent:`neutral`,design:`filled`,class:(0,r.tw)([`bg-neutral`,`text-on-neutral`])},{intent:`surface`,design:`filled`,class:(0,r.tw)([`bg-surface`,`text-on-surface`])}],a=[{intent:`main`,design:`outlined`,class:(0,r.tw)([`text-main`])},{intent:`support`,design:`outlined`,class:(0,r.tw)([`text-support`])},{intent:`accent`,design:`outlined`,class:(0,r.tw)([`text-accent`])},{intent:`success`,design:`outlined`,class:(0,r.tw)([`text-success`])},{intent:`alert`,design:`outlined`,class:(0,r.tw)([`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,r.tw)([`text-error`])},{intent:`info`,design:`outlined`,class:(0,r.tw)([`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,r.tw)([`text-neutral`])}],o=[{intent:`main`,design:`tinted`,class:(0,r.tw)([`bg-main-container`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,r.tw)([`bg-support-container`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,r.tw)([`bg-accent-container`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,r.tw)([`bg-success-container`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,r.tw)([`bg-alert-container`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,r.tw)([`bg-error-container`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,r.tw)([`bg-info-container`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,r.tw)([`bg-neutral-container`,`text-on-neutral-container`])}],s=(0,t.cva)([`box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap`,`text-caption-highlight`,`px-md`],{variants:{design:(0,r.makeVariants)({filled:[],outlined:[`border-sm`,`border-current`],tinted:[]}),size:(0,r.makeVariants)({md:[`h-sz-20`],lg:[`h-sz-24`]}),shape:(0,r.makeVariants)({square:[],rounded:[`rounded-tag`],pill:[`rounded-full`]}),intent:(0,r.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[...i,...a,...o],defaultVariants:{design:`filled`,intent:`support`,size:`md`,shape:`pill`}}),c=({design:t=`filled`,intent:r=`support`,size:i=`md`,shape:a=`rounded`,asChild:o,className:c,ref:l,...u})=>(0,n.jsx)(o?e.Slot:`span`,{"data-spark-component":`tag`,ref:l,className:s({className:c,design:t,intent:r,size:i,shape:a}),...u});exports.Tag=c;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@spark-ui/internal-utils");var i=[{intent:`main`,design:`filled`,class:(0,r.tw)([`bg-main`,`text-on-main`])},{intent:`support`,design:`filled`,class:(0,r.tw)([`bg-support`,`text-on-support`])},{intent:`accent`,design:`filled`,class:(0,r.tw)([`bg-accent`,`text-on-accent`])},{intent:`success`,design:`filled`,class:(0,r.tw)([`bg-success`,`text-on-success`])},{intent:`alert`,design:`filled`,class:(0,r.tw)([`bg-alert`,`text-on-alert`])},{intent:`danger`,design:`filled`,class:(0,r.tw)([`bg-error`,`text-on-error`])},{intent:`info`,design:`filled`,class:(0,r.tw)([`bg-info`,`text-on-info`])},{intent:`neutral`,design:`filled`,class:(0,r.tw)([`bg-neutral`,`text-on-neutral`])},{intent:`surface`,design:`filled`,class:(0,r.tw)([`bg-surface`,`text-on-surface`])}],a=[{intent:`main`,design:`outlined`,class:(0,r.tw)([`text-main`])},{intent:`support`,design:`outlined`,class:(0,r.tw)([`text-support`])},{intent:`accent`,design:`outlined`,class:(0,r.tw)([`text-accent`])},{intent:`success`,design:`outlined`,class:(0,r.tw)([`text-success`])},{intent:`alert`,design:`outlined`,class:(0,r.tw)([`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,r.tw)([`text-error`])},{intent:`info`,design:`outlined`,class:(0,r.tw)([`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,r.tw)([`text-neutral`])}],o=[{intent:`main`,design:`tinted`,class:(0,r.tw)([`bg-main-container`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,r.tw)([`bg-support-container`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,r.tw)([`bg-accent-container`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,r.tw)([`bg-success-container`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,r.tw)([`bg-alert-container`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,r.tw)([`bg-error-container`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,r.tw)([`bg-info-container`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,r.tw)([`bg-neutral-container`,`text-on-neutral-container`])},{intent:`ai`,design:`tinted`,class:(0,r.tw)([`bg-ai-container`,`text-on-ai-container`])}],s=(0,t.cva)([`box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap`,`text-caption-highlight`,`px-md`],{variants:{design:(0,r.makeVariants)({filled:[],outlined:[`border-sm`,`border-current`],tinted:[]}),size:(0,r.makeVariants)({md:[`h-sz-20`],lg:[`h-sz-24`]}),shape:(0,r.makeVariants)({square:[],rounded:[`rounded-tag`],pill:[`rounded-full`]}),intent:(0,r.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],ai:[]})},compoundVariants:[...i,...a,...o],defaultVariants:{design:`filled`,intent:`support`,size:`md`,shape:`pill`}}),c=({design:t=`filled`,intent:r=`support`,size:i=`md`,shape:a=`rounded`,asChild:o,className:c,ref:l,...u})=>(0,n.jsx)(o?e.Slot:`span`,{"data-spark-component":`tag`,ref:l,className:s({className:c,design:t,intent:r,size:i,shape:a}),...u});exports.Tag=c;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/tag/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption-highlight',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-tag'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n ['main'
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n {\n intent: 'ai',\n design: 'tinted',\n class: tw(['bg-ai-container', 'text-on-ai-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption-highlight',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-tag'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'info',\n 'neutral',\n 'danger',\n 'surface',\n 'ai',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n ai: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'support',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>, TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\n/**\n * A compact element that labels, categorizes, or organizes content using keywords.\n */\nexport const Tag = ({\n design = 'filled',\n intent = 'support',\n size = 'md',\n shape = 'rounded',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"mappings":"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"}
|
package/dist/tag/index.mjs
CHANGED
|
@@ -130,6 +130,11 @@ var a = [
|
|
|
130
130
|
intent: "neutral",
|
|
131
131
|
design: "tinted",
|
|
132
132
|
class: i(["bg-neutral-container", "text-on-neutral-container"])
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
intent: "ai",
|
|
136
|
+
design: "tinted",
|
|
137
|
+
class: i(["bg-ai-container", "text-on-ai-container"])
|
|
133
138
|
}
|
|
134
139
|
], c = t([
|
|
135
140
|
"box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap",
|
|
@@ -160,7 +165,8 @@ var a = [
|
|
|
160
165
|
danger: [],
|
|
161
166
|
info: [],
|
|
162
167
|
neutral: [],
|
|
163
|
-
surface: []
|
|
168
|
+
surface: [],
|
|
169
|
+
ai: []
|
|
164
170
|
})
|
|
165
171
|
},
|
|
166
172
|
compoundVariants: [
|
package/dist/tag/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption-highlight',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-tag'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n ['main'
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n {\n intent: 'main',\n design: 'filled',\n class: tw(['bg-main', 'text-on-main']),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw(['bg-support', 'text-on-support']),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw(['bg-accent', 'text-on-accent']),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw(['bg-success', 'text-on-success']),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw(['bg-alert', 'text-on-alert']),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw(['bg-error', 'text-on-error']),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw(['bg-info', 'text-on-info']),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw(['bg-neutral', 'text-on-neutral']),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw(['bg-surface', 'text-on-surface']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw(['text-main']),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw(['text-support']),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw(['text-accent']),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw(['text-success']),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw(['text-alert']),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw(['text-error']),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw(['text-info']),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw(['text-neutral']),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw(['bg-main-container', 'text-on-main-container']),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw(['bg-support-container', 'text-on-support-container']),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw(['bg-accent-container', 'text-on-accent-container']),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw(['bg-success-container', 'text-on-success-container']),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw(['bg-alert-container', 'text-on-alert-container']),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw(['bg-error-container', 'text-on-error-container']),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw(['bg-info-container', 'text-on-info-container']),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n },\n {\n intent: 'ai',\n design: 'tinted',\n class: tw(['bg-ai-container', 'text-on-ai-container']),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n [\n 'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n 'text-caption-highlight',\n 'px-md',\n ],\n {\n variants: {\n /**\n * Main style of the tag.\n * - `filled`: Tag will be plain.\n * - `outlined`: Tag will have a surface background with an colored outline/text.\n * - `tinted`: Tag will be filled but using a lighter color scheme.\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n filled: [],\n outlined: ['border-sm', 'border-current'],\n tinted: [],\n }),\n size: makeVariants<'size', ['md', 'lg']>({\n md: ['h-sz-20'],\n lg: ['h-sz-24'],\n }),\n shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n square: [],\n rounded: ['rounded-tag'],\n pill: ['rounded-full'],\n }),\n /**\n * Color scheme of the tag.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'info',\n 'neutral',\n 'danger',\n 'surface',\n 'ai',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n ai: [],\n }),\n },\n compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n defaultVariants: {\n design: 'filled',\n intent: 'support',\n size: 'md',\n shape: 'pill',\n },\n }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>, TagStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n Design extends TagProps['design'],\n K extends TagStylesProps['intent'] | never = never,\n> {\n design?: Design\n intent?: Exclude<TagStylesProps['intent'], K>\n ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n | FilteredDesignIntent<'tinted', 'surface'>\n | FilteredDesignIntent<'outlined', 'surface'>\n | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\n/**\n * A compact element that labels, categorizes, or organizes content using keywords.\n */\nexport const Tag = ({\n design = 'filled',\n intent = 'support',\n size = 'md',\n shape = 'rounded',\n asChild,\n className,\n ref,\n ...others\n}: TagProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"tag\"\n ref={ref}\n className={tagStyles({\n className,\n design,\n intent,\n size,\n shape,\n })}\n {...others}\n />\n )\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -47,15 +47,15 @@
|
|
|
47
47
|
"build": "NODE_OPTIONS='--max-old-space-size=8192' vite build"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@base-ui/react": "
|
|
50
|
+
"@base-ui/react": "1.7.0",
|
|
51
51
|
"@react-aria/utils": "^3.34.1",
|
|
52
52
|
"@react-stately/collections": "^3.13.1",
|
|
53
53
|
"@react-types/checkbox": "^3.11.0",
|
|
54
54
|
"@react-types/grid": "^3.4.0",
|
|
55
55
|
"@react-types/shared": "^3.36.0",
|
|
56
|
-
"@spark-ui/hooks": "18.
|
|
57
|
-
"@spark-ui/icons": "18.
|
|
58
|
-
"@spark-ui/internal-utils": "18.
|
|
56
|
+
"@spark-ui/hooks": "18.1.1",
|
|
57
|
+
"@spark-ui/icons": "18.1.1",
|
|
58
|
+
"@spark-ui/internal-utils": "18.1.1",
|
|
59
59
|
"@zag-js/pagination": "1.30.0",
|
|
60
60
|
"@zag-js/react": "1.30.0",
|
|
61
61
|
"class-variance-authority": "0.7.1",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"react-snap-carousel": "0.5.1"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@spark-ui/theme-utils": "18.
|
|
70
|
+
"@spark-ui/theme-utils": "18.1.1",
|
|
71
71
|
"react": "19.2.4",
|
|
72
72
|
"react-dom": "19.2.4",
|
|
73
73
|
"tailwindcss": "4.1.18"
|