another-ui
Version:
as the name says, it's another ui library for React built on Tailwind & Shadcn
598 lines (562 loc) • 19.2 kB
JavaScript
// node_modules/rescript/lib/es6/caml_option.js
function identity(value) {
return value;
}
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var createPlugin$1 = {};
var createPlugin = {};
var hasRequiredCreatePlugin$1;
function requireCreatePlugin$1 () {
if (hasRequiredCreatePlugin$1) return createPlugin;
hasRequiredCreatePlugin$1 = 1;
(function (exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
function createPlugin(plugin, config) {
return {
handler: plugin,
config
};
}
createPlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {
const optionsFunction = function(options) {
return {
__options: options,
handler: pluginFunction(options),
config: configFunction(options)
};
};
optionsFunction.__isOptionsFunction = true;
// Expose plugin dependencies so that `object-hash` returns a different
// value if anything here changes, to ensure a rebuild is triggered.
optionsFunction.__pluginFunction = pluginFunction;
optionsFunction.__configFunction = configFunction;
return optionsFunction;
};
const _default = createPlugin;
} (createPlugin));
return createPlugin;
}
var hasRequiredCreatePlugin;
function requireCreatePlugin () {
if (hasRequiredCreatePlugin) return createPlugin$1;
hasRequiredCreatePlugin = 1;
(function (exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
const _createPlugin = /*#__PURE__*/ _interop_require_default(requireCreatePlugin$1());
function _interop_require_default(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
const _default = _createPlugin.default;
} (createPlugin$1));
return createPlugin$1;
}
var plugin$1;
var hasRequiredPlugin;
function requirePlugin () {
if (hasRequiredPlugin) return plugin$1;
hasRequiredPlugin = 1;
let createPlugin = requireCreatePlugin();
plugin$1 = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
return plugin$1;
}
var tailwindcssAnimate;
var hasRequiredTailwindcssAnimate;
function requireTailwindcssAnimate () {
if (hasRequiredTailwindcssAnimate) return tailwindcssAnimate;
hasRequiredTailwindcssAnimate = 1;
const plugin = requirePlugin();
function filterDefault(values) {
return Object.fromEntries(
Object.entries(values).filter(([key]) => key !== "DEFAULT"),
)
}
tailwindcssAnimate = plugin(
({ addUtilities, matchUtilities, theme }) => {
addUtilities({
"@keyframes enter": theme("keyframes.enter"),
"@keyframes exit": theme("keyframes.exit"),
".animate-in": {
animationName: "enter",
animationDuration: theme("animationDuration.DEFAULT"),
"--tw-enter-opacity": "initial",
"--tw-enter-scale": "initial",
"--tw-enter-rotate": "initial",
"--tw-enter-translate-x": "initial",
"--tw-enter-translate-y": "initial",
},
".animate-out": {
animationName: "exit",
animationDuration: theme("animationDuration.DEFAULT"),
"--tw-exit-opacity": "initial",
"--tw-exit-scale": "initial",
"--tw-exit-rotate": "initial",
"--tw-exit-translate-x": "initial",
"--tw-exit-translate-y": "initial",
},
});
matchUtilities(
{
"fade-in": (value) => ({ "--tw-enter-opacity": value }),
"fade-out": (value) => ({ "--tw-exit-opacity": value }),
},
{ values: theme("animationOpacity") },
);
matchUtilities(
{
"zoom-in": (value) => ({ "--tw-enter-scale": value }),
"zoom-out": (value) => ({ "--tw-exit-scale": value }),
},
{ values: theme("animationScale") },
);
matchUtilities(
{
"spin-in": (value) => ({ "--tw-enter-rotate": value }),
"spin-out": (value) => ({ "--tw-exit-rotate": value }),
},
{ values: theme("animationRotate") },
);
matchUtilities(
{
"slide-in-from-top": (value) => ({
"--tw-enter-translate-y": `-${value}`,
}),
"slide-in-from-bottom": (value) => ({
"--tw-enter-translate-y": value,
}),
"slide-in-from-left": (value) => ({
"--tw-enter-translate-x": `-${value}`,
}),
"slide-in-from-right": (value) => ({
"--tw-enter-translate-x": value,
}),
"slide-out-to-top": (value) => ({
"--tw-exit-translate-y": `-${value}`,
}),
"slide-out-to-bottom": (value) => ({
"--tw-exit-translate-y": value,
}),
"slide-out-to-left": (value) => ({
"--tw-exit-translate-x": `-${value}`,
}),
"slide-out-to-right": (value) => ({
"--tw-exit-translate-x": value,
}),
},
{ values: theme("animationTranslate") },
);
matchUtilities(
{ duration: (value) => ({ animationDuration: value }) },
{ values: filterDefault(theme("animationDuration")) },
);
matchUtilities(
{ delay: (value) => ({ animationDelay: value }) },
{ values: theme("animationDelay") },
);
matchUtilities(
{ ease: (value) => ({ animationTimingFunction: value }) },
{ values: filterDefault(theme("animationTimingFunction")) },
);
addUtilities({
".running": { animationPlayState: "running" },
".paused": { animationPlayState: "paused" },
});
matchUtilities(
{ "fill-mode": (value) => ({ animationFillMode: value }) },
{ values: theme("animationFillMode") },
);
matchUtilities(
{ direction: (value) => ({ animationDirection: value }) },
{ values: theme("animationDirection") },
);
matchUtilities(
{ repeat: (value) => ({ animationIterationCount: value }) },
{ values: theme("animationRepeat") },
);
},
{
theme: {
extend: {
animationDelay: ({ theme }) => ({
...theme("transitionDelay"),
}),
animationDuration: ({ theme }) => ({
0: "0ms",
...theme("transitionDuration"),
}),
animationTimingFunction: ({ theme }) => ({
...theme("transitionTimingFunction"),
}),
animationFillMode: {
none: "none",
forwards: "forwards",
backwards: "backwards",
both: "both",
},
animationDirection: {
normal: "normal",
reverse: "reverse",
alternate: "alternate",
"alternate-reverse": "alternate-reverse",
},
animationOpacity: ({ theme }) => ({
DEFAULT: 0,
...theme("opacity"),
}),
animationTranslate: ({ theme }) => ({
DEFAULT: "100%",
...theme("translate"),
}),
animationScale: ({ theme }) => ({
DEFAULT: 0,
...theme("scale"),
}),
animationRotate: ({ theme }) => ({
DEFAULT: "30deg",
...theme("rotate"),
}),
animationRepeat: {
0: "0",
1: "1",
infinite: "infinite",
},
keyframes: {
enter: {
from: {
opacity: "var(--tw-enter-opacity, 1)",
transform:
"translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
},
},
exit: {
to: {
opacity: "var(--tw-exit-opacity, 1)",
transform:
"translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
},
},
},
},
},
},
);
return tailwindcssAnimate;
}
var tailwindcssAnimateExports = requireTailwindcssAnimate();
var twAnimate = /*@__PURE__*/getDefaultExportFromCjs(tailwindcssAnimateExports);
var pluginExports = requirePlugin();
var plugin = /*@__PURE__*/getDefaultExportFromCjs(pluginExports);
const colorPrimitives = {
black: {
1: '#25262b', // deep
2: '#221E1F', // darker
},
gray: {
1: '#f2f2f4', // very light
2: '#e8ebf4', // soft off-white
3: '#d7dbe7', // light cool
4: '#e0e2ef', // light neutral
5: '#686a77', // mid
6: '#595657', // muted
7: '#303644', // soft
8: '#272b36', // medium
9: '#232730', // dark
10: '#20242d', // deepest
},
yellow: {
1: '#ffc547', // vibrant
2: '#f8b55e', // light orange-yellow
3: '#e7c53a', // golden
4: '#f3c74a', // muted
},
green: {
1: '#66C770', // success (single entry, already light)
},
blue: {
1: '#36dee9', // bright
2: '#67b6be', // soft
},
orange: {
1: '#f5984b', // warning (single entry, already light)
},
red: {
1: '#ef6970', // danger (single entry, already light)
},
white: {
1: '#FFFFFF', // pure (single entry, already light)
},
neutral: {
1: '#f2f2f4', // very light
2: '#e8ebf4', // soft off-white
3: '#d7dbe7', // light cool
4: '#e0e2ef', // light neutral
},
};
const textSizePrimitives = {
// Font sizes (in rem units)
fontSize: {
h1: '3rem', // Large size for main headings
h2: '2.5rem', // Secondary headings
h3: '2rem', // Standard heading size
p: '1rem', // Standard paragraph size
subtitle: '1.5rem', // Subtitle text size
caption: '0.875rem', // Smallest size for captions
},
// Font weights
fontWeight: {
regular: 'normal', // Normal weight for body text and subtitles
bold: 'bold', // Bold weight for headings and emphasized text
},
// Line heights (for readability)
lineHeight: {
h1: '1.2', // Tight line height for large headings
h2: '1.3', // Slightly more space between lines for h2
h3: '1.4', // Normal line height for standard heading
p: '1.6', // Comfortable line height for paragraphs
subtitle: '1.5', // Line height for subtitles
caption: '1.4', // Small line height for captions
},
// Letter Spacing (adjust for readability or design needs)
letterSpacing: {
h1: '-0.02em', // Slightly negative letter spacing for h1
h2: '-0.01em', // Slightly negative letter spacing for h2
h3: '0', // Normal letter spacing for h3
p: '0', // Normal letter spacing for paragraph
subtitle: '0', // Normal letter spacing for subtitle
caption: '0.05em', // Small positive letter spacing for captions
},
};
const bgColorTokens = {
// For primary application backgrounds or surfaces (e.g., cards, containers)
surface: {
DEFAULT: colorPrimitives.gray[2], // Light gray for clean surfaces
muted: colorPrimitives.gray[4], // Slightly darker for subtle surface differentiation
overlay: colorPrimitives.gray[9], // For overlays like modals or dropdowns
skeleton: colorPrimitives.gray[9], // For skeleton loaders and placeholders
disabled: colorPrimitives.gray[5], // Muted mid-gray for disabled surfaces
},
// For brand-specific elements like headers, footers, or primary buttons
brand: {
DEFAULT: colorPrimitives.gray[7], // Muted brand background
disabled: colorPrimitives.gray[6], // Muted darker gray for disabled brand areas
medium: colorPrimitives.gray[8],
},
// For states indicating success (e.g., notifications, success banners)
success: {
DEFAULT: colorPrimitives.green[1], // Green background for success
disabled: colorPrimitives.gray[4], // Neutral muted tone for disabled success
},
// For error or danger states (e.g., error messages, alerts)
danger: {
DEFAULT: colorPrimitives.red[1], // Red background for danger or errors
disabled: colorPrimitives.gray[5], // Muted mid-gray for disabled danger
},
// For warnings (e.g., alert banners, cautions)
warning: {
DEFAULT: colorPrimitives.orange[1], // Orange background for warnings
disabled: colorPrimitives.gray[5], // Muted mid-gray for disabled warnings
},
// For informational states (e.g., tips, hints, or system messages)
info: {
DEFAULT: colorPrimitives.blue[1], // Blue for primary informational elements
soft: colorPrimitives.blue[2], // Softer blue for secondary information
disabled: colorPrimitives.gray[4], // Neutral muted tone for disabled info
},
// For primary emphasis areas like buttons, headers, or key highlights
primary: {
DEFAULT: colorPrimitives.yellow[1], // Yellow for primary focus areas
muted: colorPrimitives.yellow[3], // Muted yellow for less prominent emphasis
disabled: colorPrimitives.gray[4], // Neutral muted tone for disabled primary
},
// For clean, minimal backgrounds (e.g., default white backgrounds)
light: {
DEFAULT: colorPrimitives.white[1], // Pure white for light and clean UI areas
disabled: colorPrimitives.gray[3], // Soft neutral gray for disabled light elements
},
// For neutral elements like dividers, borders, or secondary backgrounds
neutral: {
DEFAULT: colorPrimitives.neutral[2], // Neutral light background for less emphasis
soft: colorPrimitives.neutral[1], // Even lighter neutral for subtle UI
disabled: colorPrimitives.gray[5], // Muted mid-gray for disabled neutral elements
},
// For dark-themed backgrounds or high-contrast elements
dark: {
DEFAULT: colorPrimitives.black[2], // Deep black for dark themes
muted: colorPrimitives.black[1], // Slightly softer black for muted dark areas
disabled: colorPrimitives.gray[8], // Soft dark-gray for disabled dark elements
},
};
const radiusTokens = {
au: '16px',
'au-full': '9999px',
};
const ringColorTokens = {
surface: {
DEFAULT: colorPrimitives.gray[2],
muted: colorPrimitives.gray[4],
},
brand: {
DEFAULT: colorPrimitives.gray[3],
},
success: {
DEFAULT: colorPrimitives.green[1],
},
danger: {
DEFAULT: colorPrimitives.red[1],
},
warning: {
DEFAULT: colorPrimitives.orange[1],
},
info: {
DEFAULT: colorPrimitives.blue[1],
soft: colorPrimitives.blue[2],
},
primary: {
DEFAULT: colorPrimitives.yellow[1],
muted: colorPrimitives.yellow[3],
},
light: {
DEFAULT: colorPrimitives.white[1],
},
neutral: {
DEFAULT: colorPrimitives.neutral[2],
soft: colorPrimitives.neutral[1],
},
dark: {
DEFAULT: colorPrimitives.black[2],
muted: colorPrimitives.black[1],
},
};
const textColorTokens = {
// Primary text used in general UI and content
body: {
DEFAULT: colorPrimitives.gray[10], // Main text color for paragraphs, body content
fg: colorPrimitives.gray[1], // Lighter text on dark background (inverse)
},
// Text related to brand identity or focus elements
brand: {
DEFAULT: colorPrimitives.gray[7], // Brand text color
fg: colorPrimitives.white[1], // Inverse color for brand text on dark background
},
// Text indicating success, used in positive feedback
success: {
DEFAULT: colorPrimitives.green[1], // Success messages, input validation success
fg: colorPrimitives.white[1], // Inverse success color for dark background
},
// Text related to danger or error states
danger: {
DEFAULT: colorPrimitives.red[1], // Error messages, critical alerts
fg: colorPrimitives.white[1], // Inverse danger color for dark background
},
// Text signaling caution or warnings
warning: {
DEFAULT: colorPrimitives.orange[1], // Warnings, cautionary messages
fg: colorPrimitives.white[1], // Inverse warning color for dark background
},
// Informational text, providing helpful tips or statuses
info: {
DEFAULT: colorPrimitives.blue[1], // Informational messages, status updates
fg: colorPrimitives.white[1], // Inverse info color for dark background
},
// Neutral text for standard content or background text
neutral: {
DEFAULT: colorPrimitives.gray[6], // Neutral text (e.g., secondary text, disabled items)
fg: colorPrimitives.black[1], // Inverse neutral color for dark background
},
};
const textSizeTokens = {
heading1: [
textSizePrimitives.fontSize.h1,
{
lineHeight: textSizePrimitives.lineHeight.h1,
fontWeight: textSizePrimitives.fontWeight.bold,
letterSpacing: textSizePrimitives.letterSpacing.h1,
},
],
heading2: [
textSizePrimitives.fontSize.h2,
{
lineHeight: textSizePrimitives.lineHeight.h2,
fontWeight: textSizePrimitives.fontWeight.bold,
letterSpacing: textSizePrimitives.letterSpacing.h2,
},
],
heading3: [
textSizePrimitives.fontSize.h3,
{
lineHeight: textSizePrimitives.lineHeight.h3,
fontWeight: textSizePrimitives.fontWeight.bold,
letterSpacing: textSizePrimitives.letterSpacing.h3,
},
],
subtitle: [
textSizePrimitives.fontSize.subtitle,
{
lineHeight: textSizePrimitives.lineHeight.subtitle,
fontWeight: textSizePrimitives.fontWeight.regular,
letterSpacing: textSizePrimitives.letterSpacing.subtitle,
},
],
paragraph: [
textSizePrimitives.fontSize.p,
{
lineHeight: textSizePrimitives.lineHeight.p,
fontWeight: textSizePrimitives.fontWeight.regular,
letterSpacing: textSizePrimitives.letterSpacing.p,
},
],
paragraphBold: [
textSizePrimitives.fontSize.p,
{
lineHeight: textSizePrimitives.lineHeight.p,
fontWeight: textSizePrimitives.fontWeight.bold,
letterSpacing: textSizePrimitives.letterSpacing.p,
},
],
caption: [
textSizePrimitives.fontSize.caption, // '0.875rem'
{
lineHeight: textSizePrimitives.lineHeight.caption, // '1.4'
fontWeight: textSizePrimitives.fontWeight.regular, // 'normal'
letterSpacing: textSizePrimitives.letterSpacing.caption, // '0.05em'
},
],
};
const config = {
content: [],
plugins: [twAnimate],
theme: {
extend: {
backgroundColor: bgColorTokens,
borderRadius: radiusTokens,
textColor: textColorTokens,
borderColor: bgColorTokens,
fontSize: textSizeTokens,
ringColor: ringColorTokens,
stroke: textColorTokens,
ringOffsetColor: ringColorTokens,
},
},
};
const auTwPlugin = plugin(identity, config);
export { auTwPlugin };
//# sourceMappingURL=auTwPlugin.js.map