@webflare/ui 0.0.0-stage → 0.1.0

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+export declare const WfUI: Plugin;
+export default WfUI;

package/dist/preset/index.cjs

@@ -0,0 +1,692 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  breakpoints: () => breakpoints,
+  preset: () => preset
+});
+module.exports = __toCommonJS(index_exports);
+var import_dev9 = require("@pandacss/dev");
+var import_preset_base = __toESM(require("@pandacss/preset-base"), 1);
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  "3xs": "360px",
+  "2xs": "420px",
+  "xs": "520px",
+  "sm": "640px",
+  "md": "768px",
+  "lg": "1024px",
+  "xl": "1280px",
+  "2xl": "1440px",
+  "3xl": "1640px",
+  "4xl": "1920px"
+};
+
+// src/tokens/colors.ts
+var import_dev = require("@pandacss/dev");
+var colors = import_dev.defineTokens.colors({
+  white: {
+    value: "#FFFFFF",
+    description: "This is the primary white color used in our design system"
+  },
+  black: {
+    value: "#000000",
+    description: "This is the primary black color used in our design system"
+  },
+  transparent: {
+    value: "#00000000",
+    description: "This is the transparent color used in our design system"
+  },
+  brand: {
+    50: {
+      value: "#FDF1EB",
+      description: "Lightest brand tint, referenced as primary-pale"
+    },
+    100: {
+      value: "#FFD9CE"
+    },
+    200: {
+      value: "#FFBAAA"
+    },
+    300: {
+      value: "#FD9B85"
+    },
+    400: {
+      value: "#f87960",
+      description: "The Webflare brand color, referenced as primary"
+    },
+    500: {
+      value: "#E75F45"
+    },
+    600: {
+      value: "#C6543F"
+    },
+    700: {
+      value: "#A44C3B"
+    },
+    800: {
+      value: "#834235"
+    },
+    900: {
+      value: "#66382E"
+    }
+  },
+  red: {
+    50: {
+      value: "#fef2f2"
+    },
+    100: {
+      value: "#fee2e2"
+    },
+    200: {
+      value: "#fecaca"
+    },
+    300: {
+      value: "#fca5a5"
+    },
+    400: {
+      value: "#f87171"
+    },
+    500: {
+      value: "#ef4444"
+    },
+    600: {
+      value: "#dc2626"
+    },
+    700: {
+      value: "#b91c1c"
+    },
+    800: {
+      value: "#991b1b"
+    },
+    900: {
+      value: "#7f1d1d"
+    },
+    950: {
+      value: "#450a0a"
+    }
+  },
+  green: {
+    50: {
+      value: "#f0fdf4"
+    },
+    100: {
+      value: "#dcfce7"
+    },
+    200: {
+      value: "#bbf7d0"
+    },
+    300: {
+      value: "#86efac"
+    },
+    400: {
+      value: "#4ade80"
+    },
+    500: {
+      value: "#22c55e"
+    },
+    600: {
+      value: "#16a34a"
+    },
+    700: {
+      value: "#15803d"
+    },
+    800: {
+      value: "#166534"
+    },
+    900: {
+      value: "#14532d"
+    },
+    950: {
+      value: "#052e16"
+    }
+  },
+  blue: {
+    50: {
+      value: "#eff6ff"
+    },
+    100: {
+      value: "#dbeafe"
+    },
+    200: {
+      value: "#bfdbfe"
+    },
+    300: {
+      value: "#93c5fd"
+    },
+    400: {
+      value: "#60a5fa"
+    },
+    500: {
+      value: "#3b82f6"
+    },
+    600: {
+      value: "#2563eb"
+    },
+    700: {
+      value: "#1d4ed8"
+    },
+    800: {
+      value: "#1e40af"
+    },
+    900: {
+      value: "#1e3a8a"
+    },
+    950: {
+      value: "#172554"
+    }
+  },
+  yellow: {
+    50: {
+      value: "#fffbeb"
+    },
+    100: {
+      value: "#fef3c7"
+    },
+    200: {
+      value: "#fde68a"
+    },
+    300: {
+      value: "#fcd34d"
+    },
+    400: {
+      value: "#fbbf24"
+    },
+    500: {
+      value: "#f59e0b"
+    },
+    600: {
+      value: "#d97706"
+    },
+    700: {
+      value: "#b45309"
+    },
+    800: {
+      value: "#92400e"
+    },
+    900: {
+      value: "#78350f"
+    },
+    950: {
+      value: "#451a03"
+    }
+  },
+  grey: {
+    50: {
+      value: "#fafafa"
+    },
+    100: {
+      value: "#e5e5e5"
+    },
+    200: {
+      value: "#d4d4d4"
+    },
+    300: {
+      value: "#a3a3a3"
+    },
+    400: {
+      value: "#737373"
+    },
+    500: {
+      value: "#525252"
+    },
+    600: {
+      value: "#404040"
+    },
+    700: {
+      value: "#333333"
+    },
+    800: {
+      value: "#262626"
+    },
+    900: {
+      value: "#1d1d1d"
+    },
+    950: {
+      value: "#171717",
+      description: "This is the darkest grey color in our design system and replaces black"
+    }
+  }
+});
+
+// src/tokens/motion.ts
+var import_dev2 = require("@pandacss/dev");
+var durations = import_dev2.defineTokens.durations({
+  fast: { value: "150ms" },
+  normal: { value: "300ms" },
+  slow: { value: "600ms" }
+});
+var easings = import_dev2.defineTokens.easings({
+  default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+  out: { value: "cubic-bezier(0.16, 1, 0.3, 1)" }
+});
+
+// src/tokens/radii.ts
+var import_dev3 = require("@pandacss/dev");
+var radii = import_dev3.defineTokens.radii({
+  "sm": { value: "4px" },
+  "md": { value: "6px" },
+  "lg": { value: "10px" },
+  "xl": { value: "16px" },
+  "2xl": { value: "20px" },
+  "3xl": { value: "24px" },
+  "4xl": { value: "32px" },
+  "5xl": { value: "40px" },
+  "pill": { value: "99rem" }
+});
+
+// src/tokens/sizes.ts
+var import_dev4 = require("@pandacss/dev");
+var sizes = import_dev4.defineTokens.sizes({
+  container: { value: "1200px" },
+  prose: { value: "44rem" }
+});
+
+// src/tokens/spacing.ts
+var import_dev5 = require("@pandacss/dev");
+var spacing = import_dev5.defineTokens.spacing({
+  "3xs": { value: "2px" },
+  "2xs": { value: "4px" },
+  "xs": { value: "8px" },
+  "sm": { value: "12px" },
+  "md": { value: "16px" },
+  "lg": { value: "20px" },
+  "xl": { value: "24px" },
+  "2xl": { value: "32px" },
+  "3xl": { value: "40px" },
+  "4xl": { value: "48px" },
+  "5xl": { value: "56px" },
+  "6xl": { value: "64px" },
+  "7xl": { value: "72px" },
+  "8xl": { value: "80px" },
+  "9xl": { value: "96px" },
+  "10xl": { value: "128px" },
+  "11xl": { value: "144px" },
+  "12xl": { value: "160px" }
+});
+
+// src/tokens/typography.ts
+var import_dev6 = require("@pandacss/dev");
+var fonts = import_dev6.defineTokens.fonts({
+  sans: {
+    value: 'Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    description: "Brand sans. Load the Figtree face in the app. Falls back to the system sans when the face is not available."
+  },
+  serif: {
+    value: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    description: "System serif. This design system does not ship a brand serif face."
+  },
+  mono: {
+    value: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    description: "System monospace. This design system does not ship a brand mono face."
+  }
+});
+var fontSizes = import_dev6.defineTokens.fontSizes({
+  "xs": { value: "12px" },
+  "sm": { value: "14px" },
+  "md": { value: "16px" },
+  "lg": { value: "20px" },
+  "xl": { value: "24px" },
+  "2xl": { value: "32px" },
+  "3xl": { value: "40px" },
+  "4xl": { value: "48px" },
+  "5xl": { value: "64px" }
+});
+var fontWeights = import_dev6.defineTokens.fontWeights({
+  regular: { value: "400", description: "Same weight as normal" },
+  normal: { value: "400" },
+  medium: { value: "500" },
+  semibold: { value: "600" },
+  bold: { value: "700" },
+  extrabold: { value: "800" }
+});
+var lineHeights = import_dev6.defineTokens.lineHeights({
+  none: { value: "1" },
+  heading: { value: "1.08" },
+  tight: { value: "1.25" },
+  normal: { value: "1.5" },
+  relaxed: { value: "1.65" }
+});
+var letterSpacings = import_dev6.defineTokens.letterSpacings({
+  tighter: { value: "-0.035em" },
+  tight: { value: "-0.02em" },
+  normal: { value: "0" },
+  wide: { value: "0.08em" }
+});
+
+// src/tokens/semantic-tokens.ts
+var import_dev7 = require("@pandacss/dev");
+var mode = (light, dark) => ({ base: light, _dark: dark, _osDark: dark });
+var subtleMix = (light, dark, status = "{opacity.color.status}", neutral = "{opacity.color.neutral}") => ({
+  value: mode(
+    `color-mix(in srgb, {colors.${light}} ${status}, {colors.grey.400} ${neutral})`,
+    `color-mix(in srgb, {colors.${dark}} ${status}, {colors.grey.800} ${neutral})`
+  )
+});
+var opacity = import_dev7.defineSemanticTokens.opacity({
+  color: {
+    status: {
+      DEFAULT: { value: mode("80%", "20%") },
+      lighter: { value: "25%" }
+    },
+    neutral: {
+      DEFAULT: { value: mode("5%", "80%") },
+      lighter: { value: mode("25%", "20%") }
+    }
+  }
+});
+var fonts2 = import_dev7.defineSemanticTokens.fonts({
+  body: {
+    value: "{fonts.sans}",
+    description: "Document face. Alias of the Figtree sans stack."
+  }
+});
+var colors2 = import_dev7.defineSemanticTokens.colors({
+  "primary": {
+    value: "{colors.brand.400}",
+    description: "The brand color. Same in both modes."
+  },
+  "primary-pale": {
+    value: "{colors.brand.50}",
+    description: "Pale brand fill"
+  },
+  "danger": {
+    DEFAULT: { value: mode("{colors.red.600}", "{colors.red.400}") },
+    subtle: {
+      DEFAULT: subtleMix("red.200", "red.400"),
+      light: subtleMix("red.400", "red.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+    },
+    text: { value: "{colors.red.900}" }
+  },
+  "success": {
+    DEFAULT: { value: mode("{colors.green.600}", "{colors.green.400}") },
+    subtle: {
+      DEFAULT: subtleMix("green.200", "green.400"),
+      light: subtleMix("green.400", "green.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+    },
+    text: { value: "{colors.green.900}" }
+  },
+  "warning": {
+    DEFAULT: { value: mode("{colors.yellow.600}", "{colors.yellow.400}") },
+    subtle: {
+      DEFAULT: subtleMix("yellow.200", "yellow.400"),
+      light: subtleMix("yellow.400", "yellow.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+    },
+    text: { value: "{colors.yellow.900}" }
+  },
+  "info": {
+    DEFAULT: { value: mode("{colors.blue.600}", "{colors.blue.400}") },
+    subtle: {
+      DEFAULT: subtleMix("blue.200", "blue.400"),
+      light: subtleMix("blue.400", "blue.200", "{opacity.color.status.lighter}", "{opacity.color.neutral.lighter}")
+    },
+    text: { value: "{colors.blue.900}" }
+  },
+  "neutral": {
+    DEFAULT: {
+      value: mode("{colors.grey.800}", "{colors.white}"),
+      description: "Default text color"
+    },
+    inverse: { value: mode("{colors.white}", "{colors.grey.800}") },
+    light: { value: "{colors.grey.400}" },
+    subtle: {
+      value: mode("{colors.grey.100}", "{colors.grey.800}"),
+      description: "Quiet neutral fill: default badge, list marker, highlighted option, open accordion item"
+    }
+  },
+  "surface": {
+    DEFAULT: {
+      value: mode("{colors.white}", "{colors.grey.950}"),
+      description: "Background of fields, menus, and dialogs"
+    },
+    raised: {
+      value: mode("{colors.white}", "{colors.grey.900}"),
+      description: "Background of panels that sit on the page, such as the prompt form"
+    }
+  },
+  "surface-muted": {
+    value: mode("{colors.grey.50}", "{colors.grey.900}"),
+    description: "Muted page section background"
+  },
+  "border": {
+    DEFAULT: {
+      value: mode("{colors.grey.200}", "{colors.grey.600}"),
+      description: "Border of fields and menus"
+    },
+    hover: {
+      value: mode("{colors.grey.300}", "{colors.grey.400}"),
+      description: "Border of a hovered field"
+    },
+    subtle: {
+      value: mode("{colors.grey.100}", "{colors.grey.800}"),
+      description: "Dividers and dialog borders"
+    },
+    card: {
+      value: mode("{colors.grey.100}", "{colors.grey.700}"),
+      description: "Border of cards, pricing cards, and the tab bar"
+    }
+  },
+  "muted": {
+    value: mode("{colors.neutral.light}", "{colors.grey.300}"),
+    description: "Secondary copy"
+  },
+  "text": {
+    muted: {
+      value: mode("{colors.muted}", "{colors.muted}"),
+      description: "Secondary copy: descriptions and helper text"
+    },
+    placeholder: {
+      value: mode("{colors.black/75}", "{colors.white/75}"),
+      description: "Placeholder text and quiet icons inside a field"
+    }
+  },
+  "loader": {
+    track: {
+      value: mode("{colors.black/17.5}", "{colors.white/17.5}"),
+      description: "Ring of the loader, behind the brand arc"
+    }
+  },
+  "input-border": { value: mode("{colors.border}", "{colors.border}") },
+  "input-bg": { value: mode("{colors.surface}", "{colors.surface}") },
+  "input-disabled-bg": { value: mode("{colors.grey.50}", "{colors.grey.800}") },
+  "input-color": { value: "{colors.grey.400}" },
+  "accent-subtle": { value: mode("{colors.brand.50}", "#f879601a") },
+  "accent-border": { value: mode("{colors.brand.100}", "#f8796040") },
+  "accent-text": { value: mode("{colors.brand.600}", "{colors.brand.300}") }
+});
+var shadows = import_dev7.defineSemanticTokens.shadows({
+  "focus": { value: "0 0 0 4px color-mix(in srgb, {colors.primary} 30%, transparent)" },
+  "focus-danger": { value: "0 0 0 4px color-mix(in srgb, {colors.red.600} 30%, transparent)" },
+  "focus-success": { value: "0 0 0 4px color-mix(in srgb, {colors.green.600} 30%, transparent)" },
+  "card": {
+    value: mode(
+      "0 1px 2px rgb(23 23 23 / 0.04), 0 12px 32px -12px rgb(23 23 23 / 0.12)",
+      "0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.6)"
+    )
+  },
+  "float": {
+    value: mode(
+      "0 2px 4px rgb(23 23 23 / 0.04), 0 32px 64px -24px rgb(23 23 23 / 0.22)",
+      "0 2px 4px rgb(0 0 0 / 0.5), 0 32px 64px -24px rgb(0 0 0 / 0.8)"
+    )
+  }
+});
+
+// src/animation.ts
+var import_dev8 = require("@pandacss/dev");
+var animationStyles = (0, import_dev8.defineAnimationStyles)({
+  slideDown: {
+    value: {
+      animationName: "slideDown",
+      animationDuration: "300ms"
+    }
+  },
+  slideUp: {
+    value: {
+      animationName: "slideUp",
+      animationDuration: "300ms"
+    }
+  },
+  progressIndeterminate: {
+    value: {
+      animationName: "progressIndeterminate",
+      animationDuration: "1.4s",
+      animationTimingFunction: "ease-in-out",
+      animationIterationCount: "infinite"
+    }
+  }
+});
+var keyframes = (0, import_dev8.defineKeyframes)({
+  slideDown: {
+    "0%": {
+      height: "0",
+      visibility: "hidden"
+    },
+    "100%": {
+      height: "auto",
+      visibility: "visible"
+    }
+  },
+  slideUp: {
+    "0%": {
+      height: "auto",
+      visibility: "visible"
+    },
+    "100%": {
+      height: "0",
+      visibility: "hidden"
+    }
+  },
+  flyoutIn: {
+    "0%": { opacity: "0" },
+    "100%": { opacity: "1" }
+  },
+  flyoutOut: {
+    "0%": { opacity: "1" },
+    "100%": { opacity: "0" }
+  },
+  progressIndeterminate: {
+    "0%": {
+      transform: "translateX(-100%)"
+    },
+    "100%": {
+      transform: "translateX(350%)"
+    }
+  }
+});
+
+// src/index.ts
+var preset = (0, import_dev9.definePreset)({
+  name: "webflare-design-preset",
+  // Import the module so `panda lib` inlines it. A string preset is resolved
+  // from the consuming app, which forced apps to install this package themselves.
+  presets: [import_preset_base.default],
+  theme: {
+    tokens: {
+      colors,
+      spacing,
+      radii,
+      fonts,
+      fontSizes,
+      fontWeights,
+      lineHeights,
+      letterSpacings,
+      sizes,
+      durations,
+      easings
+    },
+    semanticTokens: {
+      colors: colors2,
+      fonts: fonts2,
+      opacity,
+      shadows
+    },
+    extend: {
+      breakpoints,
+      containers: {
+        "xs": "320px",
+        "sm": "384px",
+        "md": "448px",
+        "lg": "512px",
+        "xl": "576px",
+        "2xl": "672px",
+        "3xl": "768px",
+        "4xl": "896px",
+        "5xl": "1024px",
+        "6xl": "1152px",
+        "7xl": "1280px",
+        "8xl": "1440px"
+      },
+      keyframes,
+      animationStyles
+    }
+  },
+  conditions: {
+    extend: {
+      light: ".light &, .light&",
+      dark: ".dark &, .dark&",
+      hasNext: "&:has(+ *)"
+    }
+  },
+  patterns: {
+    extend: {
+      container: {
+        transform({ maxWidth, px }) {
+          return {
+            position: "relative",
+            maxWidth: {
+              "base": "360px",
+              "3xs": "360px",
+              "2xs": "400px",
+              "xs": "500px",
+              "sm": "620px",
+              "md": "740px",
+              "lg": "1000px",
+              "xl": "1200px",
+              "2xl": "1400px",
+              "3xl": "1600px",
+              ...maxWidth
+            },
+            mx: "auto",
+            px: { base: "lg", ...px },
+            transition: "max-width 200ms"
+          };
+        }
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  breakpoints,
+  preset
+});

package/dist/preset/index.d.cts

@@ -0,0 +1,18 @@
+import { Preset } from '@pandacss/dev';
+
+declare const breakpoints: {
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+};
+
+declare const preset: Preset;
+
+export { breakpoints, preset };