@ribbon-studios/ribbon 1.0.4 → 1.1.0

package/dist/src/Ribbon.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
+export declare function Ribbon<T extends ElementType = 'div'>({ as, children, backgroundColor, color, position, ...props }: Ribbon.Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Ribbon {
+    type Props<T extends ElementType<{
+        onClick?: () => void;
+    }>> = {
+        as?: T;
+        /**
+         * The contents of the ribbon
+         */
+        children?: ReactNode;
+        /**
+         * The font color
+         *
+         * @default 'black'
+         */
+        color?: string;
+        /**
+         * The background color
+         *
+         * @default 'white'
+         */
+        backgroundColor?: string;
+        /**
+         * Whether the ribbon should be aligned at the 'top' or 'bottom'
+         *
+         * @default 'top-right'
+         */
+        position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    } & ComponentProps<T>;
+}

package/dist/src/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './Ribbon';

package/eslint.config.ts

@@ -0,0 +1,14 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import unusedImports from 'eslint-plugin-unused-imports';
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+  plugins: {
+    'unused-imports': unusedImports,
+  },
+  rules: {
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'unused-imports/no-unused-imports': 'error',
+  },
+});

package/flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1712608508,
-        "narHash": "sha256-vMZ5603yU0wxgyQeHJryOI+O61yrX2AHwY6LOFyV1gM=",
+        "lastModified": 1741173522,
+        "narHash": "sha256-k7VSqvv0r1r53nUI/IfPHCppkUAddeXn843YlAC5DR0=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "4cba8b53da471aea2ab2b0c1f30a81e7c451f4b6",
+        "rev": "d69ab0d71b22fa1ce3dbeff666e6deb4917db049",
         "type": "github"
       },
       "original": {

package/package.json

@@ -1,46 +1,46 @@
 {
   "name": "@ribbon-studios/ribbon",
   "description": "A simple react ribbon~",
-  "version": "1.0.4",
+  "version": "1.1.0",
+  "type": "module",
   "source": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "start": "parcel demo/index.html",
-    "build": "parcel build",
+    "dev": "vite dev",
+    "build": "vite build",
     "lint": "eslint .",
-    "test": "jest --coverage=false",
-    "test:coverage": "jest --coverage"
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@kayahr/jest-electron-runner": "^29.11.0",
-    "@parcel/packager-ts": "2.11.0",
-    "@parcel/transformer-inline-string": "2.11.0",
-    "@parcel/transformer-sass": "2.11.0",
-    "@parcel/transformer-typescript-types": "2.11.0",
-    "@testing-library/react": "^14.1.2",
+    "@eslint/js": "^9.24.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/bun": "^1.2.8",
     "@types/chance": "^1.1.6",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "chance": "^1.1.11",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "parcel": "^2.11.0",
-    "process": "^0.11.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.1.1",
+    "ajv": "^8.17.1",
+    "chance": "^1.1.12",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "happy-dom": "^17.4.4",
+    "jiti": "^2.4.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sass-embedded": "^1.86.3",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-lib-inject-css": "^2.2.1",
+    "vitest": "^3.1.1"
   },
   "publishConfig": {
     "access": "public"

package/src/Ribbon.tsx

@@ -1,51 +1,54 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../global.d.ts" />
+import { ComponentProps, ElementType, ReactNode } from 'react';
+import styles from './Ribbon.module.css';
 
-import { ComponentProps, ReactNode } from 'react';
-import * as styles from './Ribbon.module.scss';
-
-export type RibbonProps = {
-  /**
-   * The contents of the ribbon
-   */
-  children?: ReactNode;
-
-  /**
-   * The font color
-   *
-   * @default 'black'
-   */
-  color?: string;
-
-  /**
-   * The background color
-   *
-   * @default 'white'
-   */
-  backgroundColor?: string;
-
-  /**
-   * Whether the ribbon should be aligned at the 'top' or 'bottom'
-   *
-   * @default 'top-right'
-   */
-  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-} & Pick<ComponentProps<'div'>, 'onClick'>;
-
-export function Ribbon({
+export function Ribbon<T extends ElementType = 'div'>({
+  as,
   children,
   backgroundColor = 'white',
   color = 'black',
   position = 'top-right',
   ...props
-}: RibbonProps) {
+}: Ribbon.Props<T>) {
+  const Component = as ?? 'div';
   const [vertical, horizontal] = position.split('-');
 
   return (
-    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid="ribbon">
-      <div className={styles.content} style={{ backgroundColor, color }} data-testid="ribbon-content">
+    <div className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid="ribbon">
+      <Component {...props} className={styles.content} style={{ backgroundColor, color }} data-testid="ribbon-content">
         {children}
-      </div>
+      </Component>
     </div>
   );
 }
+
+export namespace Ribbon {
+  export type Props<T extends ElementType<{ onClick?: () => void }>> = {
+    as?: T;
+
+    /**
+     * The contents of the ribbon
+     */
+    children?: ReactNode;
+
+    /**
+     * The font color
+     *
+     * @default 'black'
+     */
+    color?: string;
+
+    /**
+     * The background color
+     *
+     * @default 'white'
+     */
+    backgroundColor?: string;
+
+    /**
+     * Whether the ribbon should be aligned at the 'top' or 'bottom'
+     *
+     * @default 'top-right'
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  } & ComponentProps<T>;
+}

package/src/__tests__/index.spec.tsx

@@ -1,10 +1,8 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../../global.d.ts" />
-
 import { render } from '@testing-library/react';
 import { Chance } from 'chance';
-import { Ribbon, RibbonProps } from '../';
-import * as styles from '../Ribbon.module.scss';
+import { Ribbon } from '../';
+import styles from '../Ribbon.module.css';
+import { describe, expect, it } from 'vitest';
 
 const chance = new Chance();
 
@@ -60,7 +58,7 @@ describe('component(Ribbon)', () => {
       expect(component.getByTestId('ribbon').classList).toContain(styles.right);
     });
 
-    const positions: NonNullable<RibbonProps['position']>[] = ['top-left', 'bottom-right', 'bottom-left'];
+    const positions: NonNullable<Ribbon.Props<'div'>['position']>[] = ['top-left', 'bottom-right', 'bottom-left'];
     for (const position of positions) {
       it(`should support '${position}'`, () => {
         const [v, h] = position.split('-');
@@ -72,4 +70,19 @@ describe('component(Ribbon)', () => {
       });
     }
   });
+
+  describe('prop(as)', () => {
+    it('should default to a div', () => {
+      const component = render(<Ribbon />);
+
+      expect(component.getByTestId('ribbon-content').tagName).toEqual('DIV');
+    });
+
+    it('should support other types', () => {
+      const component = render(<Ribbon as="a" href="https://tyria.ribbonstudios.com" />);
+
+      expect(component.getByTestId('ribbon-content').tagName).toEqual('A');
+      expect(component.getByTestId('ribbon-content').getAttribute('href')).toEqual('https://tyria.ribbonstudios.com');
+    });
+  });
 });

package/{global.d.ts → src/global.d.ts}

@@ -1,4 +1,4 @@
-declare module '*.module.scss' {
+declare module '*.module.css' {
   const content: Record<string, string>;
   export = content;
   export default content;

package/tsconfig.json

@@ -16,6 +16,6 @@
     "jsx": "react-jsx",
     "experimentalDecorators": true
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["src", "demo"],
   "exclude": ["node_modules"]
 }

package/vite.config.ts

@@ -0,0 +1,50 @@
+import react from '@vitejs/plugin-react';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { peerDependencies } from './package.json';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => ({
+  build: {
+    lib: command === 'build' && {
+      entry: [resolve(__dirname, './src/index.ts')],
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions:
+      command === 'serve'
+        ? {
+            input: {
+              index: resolve(__dirname, './demo/index.html'),
+            },
+            external: Object.keys(peerDependencies),
+          }
+        : undefined,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    setupFiles: './__tests__/setup.ts',
+    include: ['./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    coverage: {
+      reporter: ['text', 'lcovonly'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['/demo/', '**/dist/', '**/__tests__/'],
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+    libInjectCss(),
+  ],
+}));

package/.eslintrc

@@ -1,15 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "plugins": ["unused-imports", "@typescript-eslint"],
-  "rules": {
-    "@typescript-eslint/no-namespace": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "unused-imports/no-unused-imports-ts": "error"
-  },
-  "ignorePatterns": ["**/node_modules/", "**/dist/", "*.d.ts"]
-}

package/__tests__/identity-obj-proxy-esm.ts

@@ -1,13 +0,0 @@
-// identity-obj-proxy has a bug when using scss files with the syntax '* as styles'
-module.exports = new Proxy(
-  {},
-  {
-    get: function getter(target, key) {
-      if (key === '__esModule') {
-        // True instead of false to pretend we're an ES module.
-        return true;
-      }
-      return key;
-    },
-  }
-);

package/dist/index.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA","sources":["src/Ribbon.module.scss"],"sourcesContent":[".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"index.css.map"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA,qEAAqE;AACrE,uCAAuC;;;;;;;;;;ACDvC,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA0B,CAAC,YAAY,CAAC;AACxC,0CAAwB,CAAC,UAAU,CAAC;;;AD6B7B,SAAS,0CAAO,YACrB,QAAQ,mBACR,kBAAkB,gBAClB,QAAQ,mBACR,WAAW,aACX,GAAG,OACS;IACZ,MAAM,CAAC,UAAU,WAAW,GAAG,SAAS,KAAK,CAAC;IAE9C,qBACE,gCAAC;QAAK,GAAG,KAAK;QAAE,WAAW,CAAC,EAAE,0BAAO,MAAM,CAAC,CAAC,EAAE,yBAAM,CAAC,SAAS,CAAC,CAAC,EAAE,yBAAM,CAAC,WAAW,CAAC,CAAC;QAAE,eAAY;kBACnG,cAAA,gCAAC;YAAI,WAAW,0BAAO,OAAO;YAAE,OAAO;iCAAE;uBAAiB;YAAM;YAAG,eAAY;sBAC5E;;;AAIT","sources":["src/index.ts","src/Ribbon.tsx","src/Ribbon.module.scss"],"sourcesContent":["export * from './Ribbon';\n","// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"../global.d.ts\" />\n\nimport { ComponentProps, ReactNode } from 'react';\nimport * as styles from './Ribbon.module.scss';\n\nexport type RibbonProps = {\n  /**\n   * The contents of the ribbon\n   */\n  children?: ReactNode;\n\n  /**\n   * The font color\n   *\n   * @default 'black'\n   */\n  color?: string;\n\n  /**\n   * The background color\n   *\n   * @default 'white'\n   */\n  backgroundColor?: string;\n\n  /**\n   * Whether the ribbon should be aligned at the 'top' or 'bottom'\n   *\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n} & Pick<ComponentProps<'div'>, 'onClick'>;\n\nexport function Ribbon({\n  children,\n  backgroundColor = 'white',\n  color = 'black',\n  position = 'top-right',\n  ...props\n}: RibbonProps) {\n  const [vertical, horizontal] = position.split('-');\n\n  return (\n    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid=\"ribbon\">\n      <div className={styles.content} style={{ backgroundColor, color }} data-testid=\"ribbon-content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"index.js.map"}

package/dist/module.js

@@ -1,58 +0,0 @@
-import "./index.css";
-import {jsx as $lkOeU$jsx} from "react/jsx-runtime";
-
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $05af965021a88cfe$exports = {};
-
-$parcel$export($05af965021a88cfe$exports, "Ribbon", function () { return $05af965021a88cfe$export$6acf8bfe08d451ac; });
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../global.d.ts" />
-
-var $ba41f8ebd12a42a2$exports = {};
-
-$parcel$export($ba41f8ebd12a42a2$exports, "bottom", function () { return $ba41f8ebd12a42a2$export$40e543e69a8b3fbb; }, function (v) { return $ba41f8ebd12a42a2$export$40e543e69a8b3fbb = v; });
-$parcel$export($ba41f8ebd12a42a2$exports, "content", function () { return $ba41f8ebd12a42a2$export$a7db06668cad9adb; }, function (v) { return $ba41f8ebd12a42a2$export$a7db06668cad9adb = v; });
-$parcel$export($ba41f8ebd12a42a2$exports, "left", function () { return $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4; }, function (v) { return $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4 = v; });
-$parcel$export($ba41f8ebd12a42a2$exports, "ribbon", function () { return $ba41f8ebd12a42a2$export$b463d277d30b81dc; }, function (v) { return $ba41f8ebd12a42a2$export$b463d277d30b81dc = v; });
-$parcel$export($ba41f8ebd12a42a2$exports, "right", function () { return $ba41f8ebd12a42a2$export$79ffe56a765070d2; }, function (v) { return $ba41f8ebd12a42a2$export$79ffe56a765070d2 = v; });
-$parcel$export($ba41f8ebd12a42a2$exports, "top", function () { return $ba41f8ebd12a42a2$export$1e95b668f3b82d; }, function (v) { return $ba41f8ebd12a42a2$export$1e95b668f3b82d = v; });
-var $ba41f8ebd12a42a2$export$40e543e69a8b3fbb;
-var $ba41f8ebd12a42a2$export$a7db06668cad9adb;
-var $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4;
-var $ba41f8ebd12a42a2$export$b463d277d30b81dc;
-var $ba41f8ebd12a42a2$export$79ffe56a765070d2;
-var $ba41f8ebd12a42a2$export$1e95b668f3b82d;
-$ba41f8ebd12a42a2$export$40e543e69a8b3fbb = `Z10rOW_bottom`;
-$ba41f8ebd12a42a2$export$a7db06668cad9adb = `Z10rOW_content`;
-$ba41f8ebd12a42a2$export$eabcd2c8791e7bf4 = `Z10rOW_left`;
-$ba41f8ebd12a42a2$export$b463d277d30b81dc = `Z10rOW_ribbon`;
-$ba41f8ebd12a42a2$export$79ffe56a765070d2 = `Z10rOW_right`;
-$ba41f8ebd12a42a2$export$1e95b668f3b82d = `Z10rOW_top`;
-
-
-function $05af965021a88cfe$export$6acf8bfe08d451ac({ children: children, backgroundColor: backgroundColor = "white", color: color = "black", position: position = "top-right", ...props }) {
-    const [vertical, horizontal] = position.split("-");
-    return /*#__PURE__*/ (0, $lkOeU$jsx)("div", {
-        ...props,
-        className: `${$ba41f8ebd12a42a2$exports.ribbon} ${$ba41f8ebd12a42a2$exports[vertical]} ${$ba41f8ebd12a42a2$exports[horizontal]}`,
-        "data-testid": "ribbon",
-        children: /*#__PURE__*/ (0, $lkOeU$jsx)("div", {
-            className: $ba41f8ebd12a42a2$exports.content,
-            style: {
-                backgroundColor: backgroundColor,
-                color: color
-            },
-            "data-testid": "ribbon-content",
-            children: children
-        })
-    });
-}
-
-
-
-
-export {$05af965021a88cfe$export$6acf8bfe08d451ac as Ribbon};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;ACAA,qEAAqE;AACrE,uCAAuC;;;;;;;;;;ACDvC,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA0B,CAAC,YAAY,CAAC;AACxC,0CAAwB,CAAC,UAAU,CAAC;;;AD6B7B,SAAS,0CAAO,YACrB,QAAQ,mBACR,kBAAkB,gBAClB,QAAQ,mBACR,WAAW,aACX,GAAG,OACS;IACZ,MAAM,CAAC,UAAU,WAAW,GAAG,SAAS,KAAK,CAAC;IAE9C,qBACE,gBAAC;QAAK,GAAG,KAAK;QAAE,WAAW,CAAC,EAAE,0BAAO,MAAM,CAAC,CAAC,EAAE,yBAAM,CAAC,SAAS,CAAC,CAAC,EAAE,yBAAM,CAAC,WAAW,CAAC,CAAC;QAAE,eAAY;kBACnG,cAAA,gBAAC;YAAI,WAAW,0BAAO,OAAO;YAAE,OAAO;iCAAE;uBAAiB;YAAM;YAAG,eAAY;sBAC5E;;;AAIT","sources":["src/index.ts","src/Ribbon.tsx","src/Ribbon.module.scss"],"sourcesContent":["export * from './Ribbon';\n","// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"../global.d.ts\" />\n\nimport { ComponentProps, ReactNode } from 'react';\nimport * as styles from './Ribbon.module.scss';\n\nexport type RibbonProps = {\n  /**\n   * The contents of the ribbon\n   */\n  children?: ReactNode;\n\n  /**\n   * The font color\n   *\n   * @default 'black'\n   */\n  color?: string;\n\n  /**\n   * The background color\n   *\n   * @default 'white'\n   */\n  backgroundColor?: string;\n\n  /**\n   * Whether the ribbon should be aligned at the 'top' or 'bottom'\n   *\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n} & Pick<ComponentProps<'div'>, 'onClick'>;\n\nexport function Ribbon({\n  children,\n  backgroundColor = 'white',\n  color = 'black',\n  position = 'top-right',\n  ...props\n}: RibbonProps) {\n  const [vertical, horizontal] = position.split('-');\n\n  return (\n    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid=\"ribbon\">\n      <div className={styles.content} style={{ backgroundColor, color }} data-testid=\"ribbon-content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,28 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-export type RibbonProps = {
-    /**
-     * The contents of the ribbon
-     */
-    children?: ReactNode;
-    /**
-     * The font color
-     *
-     * @default 'black'
-     */
-    color?: string;
-    /**
-     * The background color
-     *
-     * @default 'white'
-     */
-    backgroundColor?: string;
-    /**
-     * Whether the ribbon should be aligned at the 'top' or 'bottom'
-     *
-     * @default 'top-right'
-     */
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-} & Pick<ComponentProps<'div'>, 'onClick'>;
-export function Ribbon({ children, backgroundColor, color, position, ...props }: RibbonProps): import("react/jsx-runtime").JSX.Element;
-
-//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";AAMA,0BAA0B;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;CACtE,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,uBAAuB,EACrB,QAAQ,EACR,eAAyB,EACzB,KAAe,EACf,QAAsB,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,2CAUb","sources":["src/src/Ribbon.tsx","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,"export * from './Ribbon';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/jest.config.ts

@@ -1,30 +0,0 @@
-import type { JestConfigWithTsJest } from 'ts-jest';
-
-const jestConfig: JestConfigWithTsJest = {
-  roots: ['<rootDir>/src'],
-  testEnvironment: 'jsdom',
-
-  moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'd.ts', 'tsx', 'json', 'node'],
-
-  transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        tsconfig: 'tsconfig.json',
-      },
-    ],
-  },
-
-  coverageProvider: 'v8',
-  collectCoverageFrom: ['<rootDir>/src/**/*'],
-
-  coveragePathIgnorePatterns: ['__tests__'],
-
-  moduleNameMapper: {
-    '\\.(scss)$': '<rootDir>/__tests__/identity-obj-proxy-esm.ts',
-  },
-
-  transformIgnorePatterns: ['^.+\\.js$'],
-};
-
-export default jestConfig;