@rufous/ui 0.0.1

package/dist/main.css

@@ -0,0 +1,244 @@
+/* lib/style.css */
+.form__group {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 100%;
+}
+.form__field {
+  font-family: inherit;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid #9b9b9b;
+  outline: 0;
+  font-size: 16px;
+  color: #000;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+}
+.theme-rufous {
+  background: #000;
+}
+.theme-default {
+  background: rgba(252, 229, 175, 1);
+}
+.theme-default .form__field {
+  border-bottom: 2px solid #9b9b9b;
+  color: #000;
+}
+.theme-rufous .form__field {
+  border-bottom: 2px solid #230202;
+  color: #fff;
+}
+.form__field::placeholder {
+  color: transparent;
+}
+.form__field:placeholder-shown ~ .form__label {
+  font-size: 16px;
+  cursor: text;
+  top: 22px;
+}
+.form__label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 14px;
+  color: #9b9b9b;
+}
+.form__field:focus {
+  border-bottom: 2px solid #000;
+}
+.form__field:focus ~ .form__label,
+.form__field:not(:placeholder-shown) ~ .form__label {
+  top: 0;
+  font-size: 12px;
+  color: #000;
+}
+.theme-default .btn {
+  background: #707070;
+  border: 1px solid #707070;
+  color: #ffffff;
+}
+.theme-default .btn:hover,
+.theme-default .btn:active {
+  background-color: initial;
+  color: #707070;
+}
+.theme-default .btn:active {
+  opacity: 0.5;
+}
+.theme-default .form__field {
+  border-bottom: 2px solid #ccc;
+  color: #2d2d2d;
+}
+.theme-default .form__field::placeholder {
+  color: #999;
+}
+.theme-default .form__label {
+  color: #999;
+}
+.theme-default .form__field:focus {
+  border-bottom: 2px solid #707070;
+}
+.theme-default .form__field:focus ~ .form__label,
+.theme-default .form__field:not(:placeholder-shown) ~ .form__label {
+  color: #2d2d2d;
+}
+.theme-rufous .btn {
+  background: #a81c08;
+  border: 1px solid #a81c08;
+  color: #ffffff;
+}
+.theme-rufous .btn:hover,
+.theme-rufous .btn:active {
+  background-color: initial;
+  color: #a81c08;
+}
+.theme-rufous .btn:active {
+  opacity: 0.5;
+}
+.theme-rufous .form__field::placeholder {
+  color: #fff;
+}
+.theme-rufous .form__label {
+  color: #fff;
+}
+.theme-rufous .form__field:focus {
+  border-bottom: 2px solid #a81c08;
+}
+.theme-rufous .form__field:focus ~ .form__label,
+.theme-rufous .form__field:not(:placeholder-shown) ~ .form__label {
+  color: #fff;
+}
+.theme-rufous .component-section h2 {
+  color: antiquewhite;
+}
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+.theme-default pre {
+  background-color: #222222;
+  color: #ffedde;
+}
+.theme-rufous pre {
+  background-color: #f5f5f5;
+  color: #2d2d2d;
+}
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+  .theme-default .checkbox-wrapper-13 input[type=checkbox] {
+    --active: #275efe;
+    --border-hover: #275efe;
+  }
+  .theme-rufous .checkbox-wrapper-13 input[type=checkbox] {
+    --active: rgb(168, 28, 8);
+    --border-hover: rgb(168, 28, 8);
+  }
+  .checkbox-wrapper-13 input[type=checkbox] {
+    --active-inner: #fff;
+    --focus: 2px rgba(39, 94, 254, 0.3);
+    --border: #bbc1e1;
+    --background: #fff;
+    --disabled: #f6f8ff;
+    --disabled-inner: #e1e6f9;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 21px;
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    border: 1px solid var(--bc, var(--border));
+    background: var(--b, var(--background));
+    transition:
+      background 0.3s,
+      border-color 0.3s,
+      box-shadow 0.2s;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:after {
+    content: "";
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled {
+    --b: var(--disabled);
+    cursor: not-allowed;
+    opacity: 0.9;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
+    --b: var(--disabled-inner);
+    --bc: var(--border);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
+    cursor: not-allowed;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
+    --bc: var(--border-hover);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:focus {
+    box-shadow: 0 0 0 var(--focus);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
+    width: 21px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
+    opacity: var(--o, 0);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
+    --o: 1;
+  }
+  .theme-rufous .checkbox-wrapper-13 span {
+    color: #fff;
+  }
+  .checkbox-wrapper-13 input[type=checkbox] + label {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-left: 4px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
+    border-radius: 7px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
+    width: 5px;
+    height: 9px;
+    border: 2px solid var(--active-inner);
+    border-top: 0;
+    border-left: 0;
+    left: 7px;
+    top: 4px;
+    transform: rotate(var(--r, 20deg));
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
+    --r: 43deg;
+  }
+}
+.checkbox-wrapper-13 * {
+  box-sizing: inherit;
+}
+.checkbox-wrapper-13 *:before,
+.checkbox-wrapper-13 *:after {
+  box-sizing: inherit;
+}
+.theme-rufous .act-icon svg {
+  color: #a81c08 !important;
+}
+.theme-default .act-icon svg {
+  color: #707070 !important;
+}

package/dist/main.d.cts

@@ -0,0 +1,15 @@
+export { Button } from './Buttons/Button.d.cjs';
+export { FloatingInput } from './TextFields/FloatingInput.d.cjs';
+export { Checkbox } from './CheckBoxes/CheckBox.d.cjs';
+export { APP_THEMES } from './utils/constants.cjs';
+export { default as ArchivedIcon } from './icons/archivedIcon.cjs';
+export { default as CopyIcon } from './icons/copyIcon.cjs';
+export { default as EditIcon } from './icons/editIcon.cjs';
+export { default as HelpOutlinedIcon } from './icons/helpOutlinedIcon.cjs';
+export { default as HierarchyIcon } from './icons/hierarchyIcon.cjs';
+export { default as NineDotMenuIcon } from './icons/nineDotMenuIcon.cjs';
+export { default as RufousLauncherIcon } from './icons/rufousLauncherBird.cjs';
+export { default as UnArchivedIcon } from './icons/unArchivedIcon.cjs';
+export { default as WorkItemIcon } from './icons/workItemIcon.cjs';
+export { RufousThemeProvider, useRufousTheme } from './Contexts/rufousThemeProvider.d.cjs';
+import 'react';

package/dist/main.d.ts

@@ -0,0 +1,15 @@
+export { Button } from './Buttons/Button.d.js';
+export { FloatingInput } from './TextFields/FloatingInput.d.js';
+export { Checkbox } from './CheckBoxes/CheckBox.d.js';
+export { APP_THEMES } from './utils/constants.js';
+export { default as ArchivedIcon } from './icons/archivedIcon.js';
+export { default as CopyIcon } from './icons/copyIcon.js';
+export { default as EditIcon } from './icons/editIcon.js';
+export { default as HelpOutlinedIcon } from './icons/helpOutlinedIcon.js';
+export { default as HierarchyIcon } from './icons/hierarchyIcon.js';
+export { default as NineDotMenuIcon } from './icons/nineDotMenuIcon.js';
+export { default as RufousLauncherIcon } from './icons/rufousLauncherBird.js';
+export { default as UnArchivedIcon } from './icons/unArchivedIcon.js';
+export { default as WorkItemIcon } from './icons/workItemIcon.js';
+export { RufousThemeProvider, useRufousTheme } from './Contexts/rufousThemeProvider.d.js';
+import 'react';

package/dist/main.js

@@ -0,0 +1,61 @@
+import "./chunk-ZZ37BKUK.js";
+import {
+  nineDotMenuIcon_default
+} from "./chunk-D7SFBVJY.js";
+import {
+  rufousLauncherBird_default
+} from "./chunk-QZFGQ5JM.js";
+import {
+  unArchivedIcon_default
+} from "./chunk-73G3VTVS.js";
+import {
+  workItemIcon_default
+} from "./chunk-QJPQC544.js";
+import {
+  FloatingInput
+} from "./chunk-AWA5Y5LH.js";
+import {
+  archivedIcon_default
+} from "./chunk-3IBCGGN3.js";
+import {
+  copyIcon_default
+} from "./chunk-6FEUS4CQ.js";
+import {
+  editIcon_default
+} from "./chunk-H372BAXA.js";
+import {
+  helpOutlinedIcon_default
+} from "./chunk-PULIGWAP.js";
+import {
+  hierarchyIcon_default
+} from "./chunk-WZAU77G7.js";
+import {
+  Button
+} from "./chunk-ASP3DBRX.js";
+import {
+  RufousThemeProvider,
+  useRufousTheme
+} from "./chunk-5VDW4EZK.js";
+import {
+  APP_THEMES
+} from "./chunk-2FHTGYR4.js";
+import {
+  Checkbox
+} from "./chunk-QKDJLUKZ.js";
+export {
+  APP_THEMES,
+  archivedIcon_default as ArchivedIcon,
+  Button,
+  Checkbox,
+  copyIcon_default as CopyIcon,
+  editIcon_default as EditIcon,
+  FloatingInput,
+  helpOutlinedIcon_default as HelpOutlinedIcon,
+  hierarchyIcon_default as HierarchyIcon,
+  nineDotMenuIcon_default as NineDotMenuIcon,
+  rufousLauncherBird_default as RufousLauncherIcon,
+  RufousThemeProvider,
+  unArchivedIcon_default as UnArchivedIcon,
+  workItemIcon_default as WorkItemIcon,
+  useRufousTheme
+};

package/dist/style.css

@@ -0,0 +1,244 @@
+/* lib/style.css */
+.form__group {
+  position: relative;
+  padding: 15px 0 0;
+  margin-top: 10px;
+  width: 100%;
+}
+.form__field {
+  font-family: inherit;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid #9b9b9b;
+  outline: 0;
+  font-size: 16px;
+  color: #000;
+  padding: 7px 0;
+  background: transparent;
+  transition: border-color 0.2s;
+}
+.theme-rufous {
+  background: #000;
+}
+.theme-default {
+  background: rgba(252, 229, 175, 1);
+}
+.theme-default .form__field {
+  border-bottom: 2px solid #9b9b9b;
+  color: #000;
+}
+.theme-rufous .form__field {
+  border-bottom: 2px solid #230202;
+  color: #fff;
+}
+.form__field::placeholder {
+  color: transparent;
+}
+.form__field:placeholder-shown ~ .form__label {
+  font-size: 16px;
+  cursor: text;
+  top: 22px;
+}
+.form__label {
+  position: absolute;
+  top: 0;
+  display: block;
+  transition: 0.2s;
+  font-size: 14px;
+  color: #9b9b9b;
+}
+.form__field:focus {
+  border-bottom: 2px solid #000;
+}
+.form__field:focus ~ .form__label,
+.form__field:not(:placeholder-shown) ~ .form__label {
+  top: 0;
+  font-size: 12px;
+  color: #000;
+}
+.theme-default .btn {
+  background: #707070;
+  border: 1px solid #707070;
+  color: #ffffff;
+}
+.theme-default .btn:hover,
+.theme-default .btn:active {
+  background-color: initial;
+  color: #707070;
+}
+.theme-default .btn:active {
+  opacity: 0.5;
+}
+.theme-default .form__field {
+  border-bottom: 2px solid #ccc;
+  color: #2d2d2d;
+}
+.theme-default .form__field::placeholder {
+  color: #999;
+}
+.theme-default .form__label {
+  color: #999;
+}
+.theme-default .form__field:focus {
+  border-bottom: 2px solid #707070;
+}
+.theme-default .form__field:focus ~ .form__label,
+.theme-default .form__field:not(:placeholder-shown) ~ .form__label {
+  color: #2d2d2d;
+}
+.theme-rufous .btn {
+  background: #a81c08;
+  border: 1px solid #a81c08;
+  color: #ffffff;
+}
+.theme-rufous .btn:hover,
+.theme-rufous .btn:active {
+  background-color: initial;
+  color: #a81c08;
+}
+.theme-rufous .btn:active {
+  opacity: 0.5;
+}
+.theme-rufous .form__field::placeholder {
+  color: #fff;
+}
+.theme-rufous .form__label {
+  color: #fff;
+}
+.theme-rufous .form__field:focus {
+  border-bottom: 2px solid #a81c08;
+}
+.theme-rufous .form__field:focus ~ .form__label,
+.theme-rufous .form__field:not(:placeholder-shown) ~ .form__label {
+  color: #fff;
+}
+.theme-rufous .component-section h2 {
+  color: antiquewhite;
+}
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+.theme-default pre {
+  background-color: #222222;
+  color: #ffedde;
+}
+.theme-rufous pre {
+  background-color: #f5f5f5;
+  color: #2d2d2d;
+}
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+  .theme-default .checkbox-wrapper-13 input[type=checkbox] {
+    --active: #275efe;
+    --border-hover: #275efe;
+  }
+  .theme-rufous .checkbox-wrapper-13 input[type=checkbox] {
+    --active: rgb(168, 28, 8);
+    --border-hover: rgb(168, 28, 8);
+  }
+  .checkbox-wrapper-13 input[type=checkbox] {
+    --active-inner: #fff;
+    --focus: 2px rgba(39, 94, 254, 0.3);
+    --border: #bbc1e1;
+    --background: #fff;
+    --disabled: #f6f8ff;
+    --disabled-inner: #e1e6f9;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    height: 21px;
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    border: 1px solid var(--bc, var(--border));
+    background: var(--b, var(--background));
+    transition:
+      background 0.3s,
+      border-color 0.3s,
+      box-shadow 0.2s;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:after {
+    content: "";
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled {
+    --b: var(--disabled);
+    cursor: not-allowed;
+    opacity: 0.9;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
+    --b: var(--disabled-inner);
+    --bc: var(--border);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
+    cursor: not-allowed;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
+    --bc: var(--border-hover);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:focus {
+    box-shadow: 0 0 0 var(--focus);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
+    width: 21px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
+    opacity: var(--o, 0);
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
+    --o: 1;
+  }
+  .theme-rufous .checkbox-wrapper-13 span {
+    color: #fff;
+  }
+  .checkbox-wrapper-13 input[type=checkbox] + label {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-left: 4px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
+    border-radius: 7px;
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
+    width: 5px;
+    height: 9px;
+    border: 2px solid var(--active-inner);
+    border-top: 0;
+    border-left: 0;
+    left: 7px;
+    top: 4px;
+    transform: rotate(var(--r, 20deg));
+  }
+  .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
+    --r: 43deg;
+  }
+}
+.checkbox-wrapper-13 * {
+  box-sizing: inherit;
+}
+.checkbox-wrapper-13 *:before,
+.checkbox-wrapper-13 *:after {
+  box-sizing: inherit;
+}
+.theme-rufous .act-icon svg {
+  color: #a81c08 !important;
+}
+.theme-default .act-icon svg {
+  color: #707070 !important;
+}

package/dist/style.d.cts

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

package/dist/style.d.ts

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

package/dist/utils/constants.cjs

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// lib/utils/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  APP_THEMES: () => APP_THEMES
+});
+module.exports = __toCommonJS(constants_exports);
+var APP_THEMES = {
+  default: {
+    name: "Default",
+    primaryColor: "#707070",
+    secondaryColor: "#e0e0e0",
+    backgroundColor: "#f5f5f5",
+    surfaceColor: "#ffffff",
+    iconColor: "#707070",
+    textColor: "#2d2d2d",
+    textSecondaryColor: "#6f6f6f",
+    borderColor: "#dcdcdc",
+    hoverColor: "#d4d4d4",
+    activeColor: "#5a5a5a",
+    button: {
+      background: "#707070",
+      text: "#ffffff",
+      hoverBackground: "#5f5f5f",
+      disabledBackground: "#cfcfcf"
+    },
+    input: {
+      background: "#ffffff",
+      text: "#2d2d2d",
+      border: "#ccc",
+      placeholder: "#999",
+      focusBorder: "#707070"
+    },
+    card: {
+      background: "#ffffff",
+      shadow: "0 1px 3px rgba(0,0,0,0.1)"
+    },
+    sidebar: {
+      background: "#e8e8e8",
+      text: "#2d2d2d",
+      hover: "#dcdcdc"
+    },
+    success: "#4CAF50",
+    warning: "#FFC107",
+    error: "#F44336"
+  },
+  rufous: {
+    name: "Rufous",
+    primaryColor: "#a81c08",
+    secondaryColor: "#f7d4cc",
+    backgroundColor: "#fff8f7",
+    surfaceColor: "#fff",
+    iconColor: "#a81c08",
+    textColor: "#2d2d2d",
+    textSecondaryColor: "#6f6f6f",
+    borderColor: "#e5e5e5",
+    hoverColor: "#f3c2b9",
+    activeColor: "#c01708",
+    button: {
+      background: "#a81c08",
+      text: "#ffffff",
+      hoverBackground: "#8f1907",
+      disabledBackground: "#f4cccc"
+    },
+    input: {
+      background: "#ffffff",
+      text: "#2d2d2d",
+      border: "#ccc",
+      placeholder: "#999",
+      focusBorder: "#a81c08"
+    },
+    card: {
+      background: "#ffffff",
+      shadow: "0 1px 3px rgba(0,0,0,0.1)"
+    },
+    sidebar: {
+      background: "#fff0ed",
+      text: "#2d2d2d",
+      hover: "#f5e0dc"
+    },
+    success: "#4CAF50",
+    warning: "#FFC107",
+    error: "#F44336"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  APP_THEMES
+});