@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/css/theme/_utilities.css

@@ -0,0 +1,541 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the Software), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@keyframes cardpulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bgprogress {
+  0% {
+    background-position-x: 0;
+  }
+
+  100% {
+    background-position-x: 1rem;
+  }
+}
+
+@variant dark (&:where([data-color-scheme="dark"], [data-color-scheme="dark"] *));
+
+@utility area-* {
+  grid-area: --value([ *]);
+}
+
+@utility area-content {
+  grid-area: content;
+}
+
+@utility area-head {
+  grid-area: head;
+}
+
+@utility area-foot {
+  grid-area: foot;
+}
+
+@utility area-body {
+  grid-area: body;
+}
+
+@utility area-side-s {
+  grid-area: side-s;
+}
+
+@utility area-side-e {
+  grid-area: side-e;
+}
+
+@utility overflow-wrap {
+  text-wrap: wrap;
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+@utility fixed-numbers {
+  font-variant-numeric: tabular-nums;
+}
+
+@utility mixed-lang {
+  unicode-bidi: plaintext;
+}
+
+@utility flex-content {
+  flex: 0 0 auto;
+}
+
+@utility flex-full {
+  flex: 1 1 100%;
+}
+
+@utility font-smallcaps {
+  font-variant: small-caps;
+}
+
+@utility scroll-hide {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+@utility scroll-thin {
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
+}
+
+@utility sectioned {
+  display: grid;
+  grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+}
+
+@utility scroll-snap-start {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: start;
+  }
+}
+
+@utility scroll-snap-center {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: center;
+  }
+}
+
+@utility scroll-snap-end {
+  scroll-snap-type: both proximity;
+
+  & > * {
+    scroll-snap-align: end;
+  }
+}
+
+@utility break-words {
+  word-break: break-word;
+}
+
+@utility outline-thin {
+  outline-width: 0.5px;
+}
+
+@utility link {
+  cursor: pointer;
+  user-select: none;
+
+  font-weight: 500;
+  color: var(--color-accent-600);
+  text-decoration: underline dotted;
+
+  &:hover {
+    text-decoration: underline solid;
+  }
+}
+
+@utility bg-odd {
+  background-color: color-mix(
+    in oklab,
+    var(--fabric-bg) 99%,
+    var(--color-tint)
+  );
+}
+
+@utility bg-even {
+  background-color: color-mix(
+    in oklab,
+    var(--fabric-bg) 92%,
+    var(--color-tint)
+  );
+}
+
+@utility bg-alternate {
+  & > :nth-child(even) {
+    background-color: color-mix(
+      in oklab,
+      var(--fabric-bg) 92%,
+      var(--color-tint)
+    );
+  }
+
+  & > :nth-child(odd) {
+    background-color: color-mix(
+      in oklab,
+      var(--fabric-bg) 99%,
+      var(--color-tint)
+    );
+  }
+}
+
+@utility bg-base {
+  background-color: var(--bg-color-base);
+}
+
+@utility bg-content {
+  background-color: var(--bg-color-content);
+}
+
+@utility bg-dimmed {
+  background-color: var(--bg-color-dimmed);
+}
+
+@utility bg-muted {
+  background-color: var(--bg-color-muted);
+}
+
+@utility bg-gray {
+  background-color: var(--bg-color-gray);
+}
+
+@utility bg-dark {
+  background-color: var(--bg-color-dark);
+}
+
+@utility bg-light {
+  background-color: var(--bg-color-light);
+}
+
+@utility bg-invert {
+  background-color: var(--bg-color-invert);
+}
+
+@utility text-reset {
+  color: var(--text-color-base);
+}
+
+@utility text-dimmed {
+  color: var(--text-color-dimmed);
+}
+
+@utility text-muted {
+  color: var(--text-color-muted);
+}
+
+@utility text-gray {
+  color: var(--text-color-gray);
+}
+
+@utility text-dark {
+  color: var(--text-color-dark);
+}
+
+@utility text-light {
+  color: var(--text-color-light);
+}
+
+@utility text-invert {
+  color: var(--text-color-invert);
+}
+
+@utility border-base {
+  border-color: var(--border-color-base);
+}
+
+@utility border-dimmed {
+  border-color: var(--border-color-dimmed);
+}
+
+@utility border-muted {
+  border-color: var(--border-color-muted);
+}
+
+@utility border-gray {
+  border-color: var(--color-tint);
+}
+
+@utility border-dark {
+  border-color: var(--border-color-dark);
+}
+
+@utility border-light {
+  border-color: var(--border-color-light);
+}
+
+@utility outline-base {
+  outline-color: var(--border-color-base);
+}
+
+@utility outline-dimmed {
+  outline-color: var(--border-color-dimmed);
+}
+
+@utility outline-muted {
+  outline-color: var(--border-color-muted);
+}
+
+@utility outline-gray {
+  outline-color: var(--color-tint);
+}
+
+@utility outline-dark {
+  outline-color: var(--border-color-dark);
+}
+
+@utility outline-light {
+  outline-color: var(--border-color-light);
+}
+
+@utility stroke-base {
+  stroke: var(--border-color-base);
+}
+
+@utility stroke-dimmed {
+  stroke: var(--border-color-dimmed);
+}
+
+@utility stroke-muted {
+  stroke: var(--border-color-muted);
+}
+
+@utility stroke-gray {
+  stroke: var(--color-tint);
+}
+
+@utility stroke-dark {
+  stroke: var(--border-color-dark);
+}
+
+@utility stroke-light {
+  stroke: var(--border-color-light);
+}
+
+@utility fill-base {
+  fill: var(--bg-color-base);
+}
+
+@utility fill-dimmed {
+  fill: var(--bg-color-dimmed);
+}
+
+@utility fill-muted {
+  fill: var(--bg-color-muted);
+}
+
+@utility fill-gray {
+  fill: var(--bg-color-gray);
+}
+
+@utility fill-dark {
+  fill: var(--bg-color-dark);
+}
+
+@utility fill-light {
+  fill: var(--bg-color-light);
+}
+
+@utility fill-invert {
+  fill: var(--bg-color-invert);
+}
+
+@utility gap-* {
+  &:where(.fabric-row) {
+    --gutter: calc(var(--spacing) * --value(integer));
+
+    gap: 0 !important;
+  }
+}
+
+@utility span-* {
+  flex: 0 1 calc((--value(integer) / 12) * 100% - var(--gutter, 0px));
+}
+
+@utility grid-cols-repeat-* {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(--value([ *]), 100%), 1fr)
+  );
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
+  );
+}
+
+@media (min-width: theme(screens.xs)) {
+  .hide-xs {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.sm)) {
+    .hide-xs-only {
+      @apply hidden;
+    }
+
+    .show-sm-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.sm)) {
+  .hide-sm {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.md)) {
+    .hide-sm-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.md)) {
+  .hide-md {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.lg)) {
+    .hide-md-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-lg-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.lg)) {
+  .hide-lg {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.xl)) {
+    .hide-lg-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-md-only,
+    .show-xl-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.xl)) {
+  .hide-xl {
+    @apply hidden;
+  }
+
+  @media (max-width: theme(screens.2xl)) {
+    .hide-xl-only {
+      @apply hidden;
+    }
+
+    .show-xs-only,
+    .show-sm-only,
+    .show-md-only,
+    .show-lg-only,
+    .show-2xl-only {
+      @apply hidden;
+    }
+  }
+}
+
+@media (min-width: theme(screens.2xl)) {
+  .hide-2xl,
+  .hide-2xl-only {
+    @apply hidden;
+  }
+
+  .show-xs-only,
+  .show-sm-only,
+  .show-md-only,
+  .show-lg-only,
+  .show-xl-only {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.xs)) {
+  .show-xs,
+  .show-sm,
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.sm)) {
+  .show-sm,
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.md)) {
+  .show-md,
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.lg)) {
+  .show-lg,
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.xl)) {
+  .show-xl,
+  .show-2xl {
+    @apply hidden;
+  }
+}
+
+@media (max-width: theme(screens.2xl)) {
+  .show-2xl {
+    @apply hidden;
+  }
+}

package/css/theme/index.css

@@ -0,0 +1,45 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@import "./_colors.css";
+@import "./_utilities.css";
+
+@theme static {
+  --font-sans: "Avenir Next", Avenir, "Noto Sans", Roboto, "Helvetica Neue",
+    "Segoe UI", Arial, sans-serif, BlinkMacSystemFont, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Noto Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+@theme static {
+  --animate-pulse: cardpulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-progress: bgprogress 750ms linear infinite;
+  --breakpoint-xs: 320px;
+  --aspect-portrait: 3 / 4;
+  --aspect-screen: 4 / 3;
+  --radius: var(--rounding);
+  --radius-capped: var(--rounding-cap);
+  --shadow-paper: 0 1px 3px 0 var(--fabric-shadow);
+}

package/dist/cjs/components/actionLabel/ActionLabel.js

@@ -5,15 +5,33 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var ButtonGroup = require('../button/ButtonGroup.js');
-var ActionLabel_module = require('./ActionLabel.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "align", "actions", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
- * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ * A label with action buttons that can be aligned to the start or end.
+ * This component is useful for displaying a label with associated actions, such as buttons, that can be aligned based on the design requirements.
+ * It automatically calculates the width of the action buttons to ensure that the label text does not overflow the container.
+ * It uses CSS variables to manage the width of the label text dynamically based on the action buttons' width.
+ * This component is designed to be flexible and can be used in various contexts where a label with actions is needed.
+ * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
+ *
+ * @param {ActionLabelProps} props - The properties for the ActionLabel component.
+ * @returns {JSX.Element} The rendered ActionLabel component.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-action-label--docs} for more details.
  */
 var ActionLabel = function ActionLabel(_ref) {
   var children = _ref.children,
@@ -22,9 +40,8 @@ var ActionLabel = function ActionLabel(_ref) {
     actions = _ref.actions,
     disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * calculate the width of the action box, width will be used for a delayed transition on hover
-   */
+  // Calculate the width of the action buttons to set a CSS variable
+  // This is used to ensure the label text does not overflow the container
   var calculateBasis = react.useCallback(function (el) {
     if (el) {
       var clone = el.cloneNode(true);
@@ -39,12 +56,13 @@ var ActionLabel = function ActionLabel(_ref) {
     }
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, ActionLabel_module.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    className: classNames(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(ButtonGroup.ButtonGroup, {
       ref: calculateBasis,
-      className: classNames(ActionLabel_module.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      "data-inner-clickable": true,
+      className: classNames("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial truncate",