@trops/dash-core 0.1.568 → 0.1.569

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, isHexColor, deriveShades, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption2, Caption, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, isHexColor, deriveShades, TAILWIND_PALETTE, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption2, Caption, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -28880,6 +28880,29 @@ function classFor(prefix, type, shade, channelValue) {
   }
   return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
 }
+
+/**
+ * CSS color value (hex literal or `var(...)` reference) for the same
+ * (type, shade, channelValue) tuple `classFor` resolves to a Tailwind
+ * className. Inline-style consumers read these via
+ * `currentTheme.cssValue[tokenName]` — see PRD US-007.
+ *
+ * Named channels look up the hex from TAILWIND_PALETTE. Hex channels
+ * produce a `var(--{type}-{shade})` reference that resolves against
+ * the CSS custom properties ThemePreviewProvider writes to :root.
+ *
+ * Returns null for unknown named-color families or shades — caller
+ * falls back to className-only reactivity for that token.
+ */
+function cssValueFor(type, shade, channelValue) {
+  if (isHexColor(channelValue)) {
+    return "var(--".concat(type, "-").concat(shade, ")");
+  }
+  var family = TAILWIND_PALETTE && TAILWIND_PALETTE[channelValue];
+  if (!family) return null;
+  var hex = family[shade] || family[String(shade)];
+  return hex || null;
+}
 function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
   if (isHexColor(channelValue)) {
     return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
@@ -28942,17 +28965,26 @@ var ThemeModel = function ThemeModel() {
         if (variant in theme === false) {
           theme[variant] = {};
         }
+        if (!theme[variant].cssValue) {
+          theme[variant].cssValue = {};
+        }
         Object.keys(variants[variant]).forEach(function (shade) {
           var numShade = variants[variant][shade];
           var hoverShade = getNextLevel(numShade);
           var textShade = invert(numShade);
           theme[variant]["bg-".concat(type, "-").concat(shade)] = classFor("bg", type, numShade, channelValue);
+          theme[variant].cssValue["bg-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
           theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-bg-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
           theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-border-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
           theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
+          theme[variant].cssValue["border-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
           // we should be "flipping" these so dark text on light and light on dark...
           theme[variant]["text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue);
+          theme[variant].cssValue["text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
           theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
+          theme[variant].cssValue["hover-text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
         });
       });
     });
@@ -29019,7 +29051,9 @@ var ThemeModel = function ThemeModel() {
     colorTypes.forEach(function (type) {
       var channelValue = theme[type];
       theme["dark"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 950, channelValue);
+      theme["dark"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 950, channelValue);
       theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
+      theme["light"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 50, channelValue);
     });
 
     // Accumulate CSS custom properties for any hex-color channels.
@@ -29061,6 +29095,17 @@ var ThemeModel = function ThemeModel() {
     theme["light"]["hover-border-none"] = "hover:border-transparent";
     theme["light"]["hover-bg-none"] = "hover:bg-transparent";
     theme["light"]["hover-text-none"] = "hover:text-transparent";
+
+    // Mirror the transparent tokens into cssValue so inline-style
+    // consumers can read borderless/transparent surfaces from the
+    // same map as colored ones.
+    ["dark", "light"].forEach(function (variant) {
+      theme[variant].cssValue["bg-none"] = "transparent";
+      theme[variant].cssValue["border-none"] = "transparent";
+      theme[variant].cssValue["hover-bg-none"] = "transparent";
+      theme[variant].cssValue["hover-border-none"] = "transparent";
+      theme[variant].cssValue["hover-text-none"] = "transparent";
+    });
     return theme;
   } catch (e) {
     return {};